Część, mam taki problem bo nie moge rozkminić. Chciałem coś aka radio button, ale z obrazkami, jako że z radio button mi nie wyszło, to chcę użyć imagów a value jest w hidden fieldach. Value się zmienia przy kliknięciu i to działa ok. Tylko mam problem, że nie widać, co jest wybrane.
Przykład z tego projektu: Jest logo gildii do wybrania. Po kliknięciu, chciałbym aby w tym jednym o tym ID kolor tła się zmienił, przykładowo na zielony. A przy reszcie, gdzie każde logo ma swoje ID zostało usunięte. Zakładając, że liczba tych "herbów" będzie się zwiększać, bo taki skrypt że przy liczbie 3 o różnych ID potrafie skleić jakiś kod. Z tym, że chce aby był reusable, liczba ich będzie się zwiększać.
Pozdrawiam, liczę że klarownie przedstawiłem koncept.
np. robisz sobie jakąś klasę selected, definiujesz w CSS, jak ma się objawiać ta klasa.
następnie po kliknięciu na przycisk przechodzisz przez wszystkie przyciski i albo dodajesz albo zabierasz klasę (element.classList.add albo element.classList.remove).
container.querySelectorAll('.selected').forEach(element => {
element.classList[element == e.target? 'add' : 'remove']('selected');
});
(zakładam, że pod e.target będzie kliknięty przycisk).
Ew. wykorzystać radio buttony. Tylko trick polega na tym, że się wykorzystuje element label skojarzony z danym radio buttonem.
https://jsfiddle.net/tdmxgbcf/
albo używając linków i pseudoselektora :target
https://jsfiddle.net/bw0xv4f6/
Takie rzeczy się robi inaczej:
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
Pod spodem masz normalne radio, a na wierzchu element ostylowany wedle własnej fantazji i nie musisz przy tym męczyć JS-a.
Jeszcze jedno pytanie odnośnie SVG. Robie powiedzmy strone w MVC .Net Core. I problem pojawia się w następującym przypadku:
https://jsfiddle.net/w3vzaej4/
Logo svg ładuję się z bazy danych, wyświetlany jest dobrze, lecz żadne skrypty na niego nie działają. Próbowałem window onload i document ready ale dalej nie daje rady. Mianowicie, tak teraz wygląda kod, a powinien się pokazywać jak w tym fiddlu u góry. JS ze zmianą koloru nie działa.
Kod:
<button id="btn-test2">Test 2</button> @Html.Raw(@Model.ImagePath1)
$('#btn-test2').on("click", function () { $('#path860').css({ fill: "#0000FF" }); });
//takie id ma w kodzie ofc
Może jeszcze opisze koncept. Z tyłu tzn w bazie jest kolumna kolor. I z pomocą tej tabelki z wartością hex i SVG, chcę, żeby użytkowników mógł sobie ustawiać swój kolor na wzorzec danego herbu. Pod tym jest hidden field i przypisuje hex value, lecz póki co nawet zmiana od strony klienta mi nawet nie działa.
U mnie na https://jsfiddle.net/w3vzaej4/ działa wybieranie predefiniowanych kolorów (to red hex itp), nie działa natomiast wybór z próbnika kolorów, więc pewnie tu masz coś skopane. Chyba nawet żadna funkcja nie jest pod wybór z tego próbnika podpięta.
Jeśli to nie o to chodzi, to wrzuć demonstrator z prezentacją problemu.
Pokaż przykład, w którym to nie działa. Trudno coś gdybać.