jQuery, toggleClass

Question

Witam, próbuję napisać grę w kółko i krzyżyk, ale mam pewien problem. Chciałbym, żeby po najechaniu kursorem na któreś pole zmieniało ono kolor, a po odjechaniu wracało do poprzedniego stanu. Stworzyłem odpowiednie klasy w CSS i do pliku JavaScript dodałem taki kod:

$(document).ready(function() {
    $('.field').click(function() {
        $('.field').toggleClass('field-active');
    });
});

Potem dodałem jeszcze

var field = document.getElementsByClassName("field");

i w pętli chciałem wykonać podobne operacje dla poszczególnych elementów tak, by tylko one zmieniały kolor. Tylko że nie wiem jak to zrobić. Proszę o pomoc.

Answer 1

żeby po najechaniu kursorem na któreś pole zmieniało ono kolor

Skoro chcesz aby po najechaniu zmieniało kolor użyj funkcji .hover(f1,f2) lub .mouseenter(f1) i .mouseleave(f2), gdzie f1 to funkcja, która wykona się po najechaniu na pole, a f2 to funkcja, która wykona się po opuszczeniu pola.

Comments

Coś takiego?

var field = document.getElementsByClassName("field");

var i = 0;
while (i < field.length) {
    field[i].mouseenter(function() {
        field[i].classList.add("field-active");
    });
    field[i].mouseleave(function() {
        field[i].classList.remove("field-active");
    });
    ++i;
}

 

---

Mniej więcej o to chodzi

---

OK, dzięki. Teraz tylko muszę znaleźć błąd (w JS mam tylko te linie). Mógłby ktoś pomóc?

---

musisz dodać EventListenera
obiekt.addEventListener("mouseover", skrypt);

---

var field = document.getElementsByClassName("field");

var i = 0;
while (i < field.length) {
    field[i].addEventListener('mouseover', function() {
        field[i].classList.add("field-active");
    });
    ++i;
}

Coś jeszcze nie działa :(

---

Kurczę nie w ten sposób, przepraszam, źle powiedziałem. Najprościej to będzie zrobić przy pomocy jquery.
 

var x = document.getElementsByClassName("field");

$(x).hover(function(){
    $(this).addClass("klasa");
    }, function(){
    $(this).removeClass("klasa");
});

co sądzisz ?

---

Dziękuję za to, że poświęcacie mi czas. Sam już nie wiem, w pliku JS mam to:

var x = document.getElementsByClassName("field");
 
$(x).hover(function(){
    $(this).addClass("field-active");
    }, function(){
    $(this).removeClass("field-active");
});

w CSSie jeszcze to:

.field {
    transition: background-color 1s ease;
}

.field-active {
    background-color: chartreuse;
}

Wciąż coś nie działa. 

---

Nie ma sprawy, jak narazie niewiele się przydałem xD. Musisz podlinkowac biblioteke jquerry do tego, wiesz jak to zrobić ?

---

OK, jestem głupi. Zapomniałem dodać document.ready na początku. Naprawdę bardzo dziękuję wszystkim za udzieloną pomoc i przepraszam.

---

Nie ma sprawy, po to jest forum by sobie pomagac ^^. Oj uwierz robiłem głupsze błędy, wczoraj np. 20 minut zasatanawiałem się czemu nie mam interakacji z lementem gdy na niego najeżdżam, a okazało się, że klase wpisałem po prostu w inny element na który myszką nie natrafiałem, takżeeee no różnie to bywa xD. 200 linijek kodu vs jeden opuszczony średnik.

Answer 2

Nie jest to najlepszy sposób, ale działa łap CodePena.

Generalnie używając jquerry wystarczy, że się posłużysz metodą "hover"

 

$("element").hover(function(){
//co sie dzieje po najechaniu (gdy myszka jest na elemencie)
}.function(){
// w jakim jest stanie po zabraniu myszki z elementu
});

 

Answer 3

Skoro chcesz przy najechaniu kursorem zmieniać tylko kolor kafelka, to w ogóle JS nie jest tutaj potrzebny, ogarnij to sobie :hover w cssie.

Comments

Tylko problem polega na tym, że chciałbym, aby podświetlały się na różne kolory, to znaczy przy ruchach jednego gracza na niebiesko, a przy ruchach drugiego na czerwono. Nie wiem, czy w CSSie da się coś takiego zrobić, pierwsze co mi przyszło do głowy to JS.

---

możesz podzielić hover dla różnnych elementów, np dla parzystych i nieparzystych w ten sposób rozwiążesz problem dla 2 osób np.
 

.klasa:nth-child(odd){
background: red;
}

.klasa:nth-child(even){
background: yellow;
}

Jeżeli zależy Ci na js to zobacz tego Pena

Answer 4

Witam. A dlaczego nie :hover w css?

Comments

Ze zwykłej ciekawości :)

---

To jeszcze pomyśl o zabezpieczeniu przed wielokrotnym ruchem tego samego gracza.