Próbuję więc użyć jQuery do wykrycia, gdy pole wyboru zostało sprawdzone i niezbędne (klikając na etykietę, powinienem dodać), aby zmienić atrybut CSS.

Oto przykład pola wyboru kodu:

<div class="block" id="block_1">
   <input type="checkbox" name="images" id="image_1" class="block_input" />
   <label for="image_1" class="block_button" style="background-image:url(img/bnw/block_1bnw.png);">
   <span>Label text</span></label>
</div>

A oto jQuery mam do tej pory, że tylko połowa prac:

$('.block_button').click(function(){
    var imgId = $(this).parent().attr('id');

    if ($(this).siblings('.block_input').checked == true) {
        $(this).css("background-image", "url(img/color/" + imgId + ".png)");
    } else {
        $(this).css("background-image", "url(img/bnw/" + imgId + "bnw.png)");
    }
});

CSS zmienia się poprawnie, gdy początkowo zaznaczysz pudełko, ale po znaczeniu nie zmieniło się. Próbowałem zalogować wynik metody. Dzięki Click i wydaje się być prawdziwe, nawet gdy odznajesz. Jak więc zdobądź instalację, aby pracować, gdy użytkownik zdecyduje się usunąć pole?

Dzięki!!

0
daviddcarr 10 grudzień 2013, 00:29

2 odpowiedzi

Najlepsza odpowiedź

Obiekt jQuery nie ma własności "sprawdzone", więc nigdy nie oceni się do prawdziwych.

Aby uzyskać dostęp do właściwości elementu HTML przez odpowiedni obiekt jQuery, musisz użyć metody .prop (). Lub, innymi słowy ...

$('.block_button').click(function(){
    var imgId = $(this).parent().attr('id');

    if (! $(this).siblings('.block_input').prop('checked')) {
        $(this).css("background-image", "url(img/color/" + imgId + ".png)");
    } else {
        $(this).css("background-image", "url(img/bnw/" + imgId + "bnw.png)");
    }
});

Uwaga, dodałem też w "!" W instrukcji IF, ponieważ to funkcja wyzwala się przed zmianą stanu pole wyboru. Stan tutaj jest przeciwieństwem tego, co będzie kiedykolwiek wydarzenie kliknięciowe zakończy propagowanie.

Istnieje kolejny sposób, aby to robi trochę więcej sensu:

$('.block_input').change(function(){
    var imgId = $(this).parent().attr('id');

    if ($(this).prop('checked')) {
        $(this).siblings('.block_button').css("background-image", "url(img/color/" + imgId + ".png)");
    } else {
        $(this).siblings('.block_button').css("background-image", "url(img/bnw/" + imgId + "bnw.png)");
    }
});

W ten sposób, w której definiowanie funkcji zostaje wywołane po zmianach wejściowych, nie wcześniej. Zostaje również wyzwolony, jeśli użytkownik kliknie w sobie pole wyboru, a nie tylko obraz, który jest obok. (Który jest przydatny, jeśli użytkownikami są tbbing na stronie)

Mam nadzieję że to pomoże!

1
wampastompa 9 grudzień 2013, 21:06

Wierzę, że twój błąd jest tutaj:

if ($(this).siblings('.block_input').checked = true) {

Powinien być == zamiast =. W rzeczywistości możesz po prostu napisać to jako:

if ($(this).siblings('.block_input').checked) {

Co się dzieje : Gdy ta linia działa, ustawisz wartość checked do true. To zastępuje poprzednią wartość checked.

Edytuj : Konieczne było kilka zmian, aby uzyskać Samiotary Przykład roboczy (JSFiddle).

  1. Zmiana zdarzenia, która ma zostać uruchomiona, gdy zmienia się polecenie, a nie z perspektywy etykiety. Zostało to również przyciągnięcie użytkowników, klikając samą zaznaczenie pola wyboru lub zmienić stan pola wyboru za pomocą innych środków (np. Za pomocą klawiatury).

    $('.block_input').change(function(){

  2. Sprawdzanie nieruchomości .checked (patrz Ta odpowiedź Więcej informacji ), lubię to:

    if ($(this).prop('checked')) {

  3. Teraz, gdy zdarzenie jest wywołane w polu wyboru, musisz zmienić swoje odniesienie do etykiety:

    $(this).siblings('.block_button').css( ...

1
Community 20 czerwiec 2020, 09:12