Jeszcze jedno pytanko z mojej strony do Was.
Mamy np. 3 divy (boxy), które są pokolorowane na jakiś kolor, załóżmy
Box 1 jest zółty, Box2, niebieski, Box3 zielony.
I teraz jeśli klikniemy na Box1 chcę aby otoczyło go np obramowanie no to ok korzystam z (document.getElementById('wzorek').style.....) ale teraz gdy klikne na Box2 chcę aby box2 się otoczył tym obramowaniem, a box1 był już nim nie otoczony.
Jak to zrobić ?
Pełna wersja: Zdarzenia
Najpierw zerujesz obramowanie dla wszystkich elementów:
Kod
// pseudo-kod:
find(["id#1", "id#2", "id#3"]).each(function() {
this.style.border = "none";
});
Następnie ustawiasz obramowanie dla wybranego (klikniętego) elementu.
find(["id#1", "id#2", "id#3"]).each(function() {
this.style.border = "none";
});
da rade jakoś bardziej łopatologicznie wytłumaczyć ;>? jakiś przykład zamiast pseudo kodu albo jakiś mini kod.
Cytat
da rade jakoś bardziej łopatologicznie wytłumaczyć ;>?
Jaśniej chyba nie potrafię: usuwasz obramowanie dla wszystkich elementów (w tym przypadku dla tych trzech divów), po czym wykonujesz kod który już znasz, tj. dodajesz obramowanie dla interesującego Cię elementu.
nie za bardzo rozumiem mechanizmu działania tego, po co mam na poczatku uswac obramowanie skoro go nie ma ? i w jaki sposob bedzie to sie odzwierciedlac w moim toku ze jak klikne na box1 to bedzie obramowanie a z poprzedniego zaznaczenia (box2) zniknie?
Czyż to nie jest oczywiste, że skoro usuwasz obramowanie ze wszystkich elementów, to obramowanie z BOX2 zniknie? A skoro następny krok to ustawienie obramowania dla BOX1 to ostatecznym efektem będzie zniknięcia obramowania z BOX2 i pojawienie się go na BOX1.
Cytat
po co mam na poczatku uswac obramowanie skoro go nie ma ?
Możesz sobie dodać sprawdzanie czy element ma obramowanie i dopiero w sytuacji gdy je ma usnąć je, ale po co? Usunięcie obramowania w momencie gdy element i tak go nie ma nic nie kosztuje.
Proponuję zrobić to tak:
- tworzysz zmienną globalną np. "elem"
- do odpowiednich div-ów dopisujesz odpowiednie zdarzenia(warto tu skorzystać z this):
Ew. możesz to zrobić tak jak napisał Crozin, choć moim zdaniem jest to gorsze rozwiązanie(szczególnie przy dużej ilości tych div-ów), czyli(może mi się uda Ci to wyjaśnić) nadajesz wszystkim div-om style.border na '', czyli usuwasz ten styl. Więc teraz żaden div nie ma ramki. Teraz ustawiasz ramkę wybranemu przez Ciebie div-owi. Teraz mamy zaznaczony odpowiedni div. Mam nadzieję, że zrozumiałeś
Skoro nie wiesz, który ma, usuwasz wszystkie. Efekt będzie taki sam jak byś usunął tylko "starą ramkę". - tyczy się to sposobu podanego przez Crozin-a
- tworzysz zmienną globalną np. "elem"
- do odpowiednich div-ów dopisujesz odpowiednie zdarzenia(warto tu skorzystać z this):
Kod
var elem;
element.onclick = function(){
if(elem)
elem.style.border = '';
(elem = this).style.border = '1px solid red';
}
element.onclick = function(){
if(elem)
elem.style.border = '';
(elem = this).style.border = '1px solid red';
}
Ew. możesz to zrobić tak jak napisał Crozin, choć moim zdaniem jest to gorsze rozwiązanie(szczególnie przy dużej ilości tych div-ów), czyli(może mi się uda Ci to wyjaśnić) nadajesz wszystkim div-om style.border na '', czyli usuwasz ten styl. Więc teraz żaden div nie ma ramki. Teraz ustawiasz ramkę wybranemu przez Ciebie div-owi. Teraz mamy zaznaczony odpowiedni div. Mam nadzieję, że zrozumiałeś
Cytat
po co mam na poczatku uswac obramowanie skoro go nie ma ?
Skoro nie wiesz, który ma, usuwasz wszystkie. Efekt będzie taki sam jak byś usunął tylko "starą ramkę". - tyczy się to sposobu podanego przez Crozin-a
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.