javascript - 定位被点击的元素

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"

中添加了