使用 jquery 定位被點擊的元素

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 類。