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");
    }
});

为什么按钮不在彩色和灰度版本之间切换？

Answer 1

您向我们展示的代码没有任何问题。

看起来问题出现在您的HTML中，或者您的JS代码的某些部分中，您没有向我们展示。

演示：

$('.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");
    }
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<button class="switch" data-click-state="1">Switch</button><br/><br/>
<img src="http://1.gravatar.com/avatar/81bf1bd14d4465c89ca500001b22cf6e?size=140" />
<img src="http://1.gravatar.com/avatar/e711e151e517ae1b897898928cc7981c?size=140" />

Answer 2

使用toggleClass方法。将样式添加到css类。

使用jquery定位单击的元素

2 个答案:

演示：