JS - dodawanie i usuwanie borderu w pętli

pytanie zadane 24 sierpnia 2017 w JavaScript przez Alterwar Dyskutant (7,650 p.)

Witam,

na stronie dostaję liczbę X obrazów. Po kliknięciu w dany obraz pobieram jego atrybuty. Mamy pewien problem. Otóż gdy klikam na dany obraz chcę aby go oznaczyło więc nadaje mu border. Po kliknięciu w inny obraz, border z pierwszego powinien zniknąć. Czyli zaznaczony powinien być tylko ten który jest obecnie kliknięty, a nie ten co był. Próbowałem już parę rzeczy ale niestety bezskutecznie. Myślałem coś typu, że jeśli element kliknięty to jego data-id(atrrybut jest dynamicznie wyciągany z bazy, w przykładzie nadałem tylko na sztywno) zostaję zapisane i porównane z następnym klikniętym elementem. Ma ktoś jakiś pomysł?

Tutaj mój kod: http://jsbin.com/fifolaroti/edit?css,output

3 odpowiedzi

odpowiedź 24 sierpnia 2017 przez Jedras Maniak (54,860 p.)
wybrane 24 sierpnia 2017 przez Alterwar

Najlepsza

Można tak:
https://jsfiddle.net/Lvg5r9ew/1/

Ale bardziej elegancko byłoby dodawać/usuwać klasę, która posiada obramowanie.

komentarz 24 sierpnia 2017 przez Alterwar Dyskutant (7,650 p.)

Dzięki, zrobiłem z 10 minut temu i dodaje klase :)

odpowiedź 24 sierpnia 2017 przez cyklop123 Bywalec (2,790 p.)

Możesz przy każdym kliknięciu 'przelecieć' pętlą po wszystkich obrazkach i wymazać border jeżeli jest, a potem dopiero dodawać do aktualnie klikniętego

komentarz 24 sierpnia 2017 przez Alterwar Dyskutant (7,650 p.)

No ale wtedy usunę również z obecnego obrazu

komentarz 24 sierpnia 2017 przez cyklop123 Bywalec (2,790 p.)

Czytaj uważnie! Usuwasz przed dodaniem do aktualnego.

komentarz 24 sierpnia 2017 przez Alterwar Dyskutant (7,650 p.)

Mój błąd :) Twój pomysł wykorzystałem ;) dzięki :)

odpowiedź 24 sierpnia 2017 przez turtelian Obywatel (1,760 p.)

for (var i = 0; i < getClassAttr.length; i++ ){
			getClassAttr[i].addEventListener('click', function(){
// tutaj czyszczenie bordera bym dał wszystkim elementom 
for (var i = 0; i < getClassAttr.length; i++ ){
this.style.border="none";
}
				this.style.border="3px solid #07a7d2";

            });
 };


cos takiego powinno dzialac jesli czegos nie zjebalem :)

W JS nadajesz podczas klika border ale nigdzie go nie usuwasz. Więc posłusznie zostaje. Przed dodaniem borderu mozesz dodac linijke zerujaca bordery wszystkim elementom.
Ps : chyba latwiej takie cos by bylo zrobic w css poprzez activa

komentarz 24 sierpnia 2017 przez Alterwar Dyskutant (7,650 p.)

Niestety nie działa to co podrzuciłeś. Próbowałem już w ten sposób.

Activ w css też nie zadziała bo doda i usunie border.

komentarz 24 sierpnia 2017 przez turtelian Obywatel (1,760 p.)

to juz nie rozumiem co chcesz zrobic. dodac border i go usunac czy zeby nie znikal ?
FAkt ten kod co napisalem nie dziala bo wlasnie sprobowalem to odpalic, ale moj zamysl byl taki jak uzytkownika cyklop123