Ориентация на щелкнул элемент

Question

Fiddle

Я пытаюсь сделать кнопку, которая переключает между сделав Img оттенки серого и нормально. Мне нужно найти способ правильно настроить кнопку, если она была нажата. Я попытался добавить класс по клику, а затем нацелился на этот класс. Я также пробовал это.

$('.switch').on("click", function() { 
    if($(this).attr('data-click-state') == 1) { 
     $(this).attr('data-click-state', 0) 
     $(this).siblings('img').css("-webkit-filter", "grayscale(100%)"); 
    } else { 
     $(this).attr('data-click-state', 1) 
     $(this).siblings('img').css("-webkit-filter", "none"); 
    } 
}); 

Почему кнопка не переключается между версиями цветов и оттенков серого? , очевидно, проблема не в моем jQuery, а в моем html, так нельзя ли использовать этот jquery на ярлыке флажка?

Answer 1

Когда вы нажимаете кнопку один раз, она обнаруживает два щелчка. Я устанавливал предупреждение вне оператора if, и я получал его дважды за клик, поэтому ваша проблема кроется в этом.

Я все еще проверяю его, но проблема прямо сейчас, нужно выяснить, почему это происходит, будет обновляться.

Обновление: Да, сэр, это было причиной, о которой я сказал в комментариях ... Вот исправленный, и вы можете возиться с ним, как вам нравится.

$('#cmn-toggle-1').on("click", function() { 
    if($(this).attr('data-click-state') == '1') { 
     $(this).attr('data-click-state', '0') 
    $(this).parents().siblings('img').css("-webkit-filter", "grayscale(100%)"); 
    } 
    else { 
    $(this).attr('data-click-state', '1') 
    $(this).parents().siblings('img').css("-webkit-filter",""); 
    } 
}); 

Новый HTML СНИП:

<div class="switch"> 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-yes-no" type="checkbox" data-click-state="1"> 
    <label for="cmn-toggle-1" data-on="Color" data-off="B&W" data-click-state="1"></label> 
</div> 

Как вы можете увидеть, если вы посмотрите на входе, я добавил в data-click-state="1"