• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JS - dodawanie i usuwanie borderu w pętli

Aruba Cloud - Virtual Private Server VPS
0 głosów
704 wizyt
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

0 głosów
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 :)
+1 głos
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 :)
0 głosów
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
komentarz 24 sierpnia 2017 przez Alterwar Dyskutant (7,650 p.)
Załóżmy mam 20 zdjęc. Klikam zdjęcie nr 1 - dostaję border. Następnie klikam zdjęcie nr. 19 dostaje border, a ze zdjęcia nr 1 border znika.

Podobne pytania

0 głosów
0 odpowiedzi 395 wizyt
pytanie zadane 24 stycznia 2017 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 558 wizyt
0 głosów
1 odpowiedź 484 wizyt
pytanie zadane 14 grudnia 2022 w JavaScript przez Dawidziu Bywalec (2,630 p.)

93,335 zapytań

142,330 odpowiedzi

322,411 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...