定位點擊的元素

Question

小提琴

我試圖制作一個在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 SNIP：

<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"