jQuery-隐藏/可见时更改元素的CSS

Question

单击锚点时，我有一个div开关。 我正在尝试在div可见且隐藏时通过类更改图标，但是代码不起作用。

有谁知道如何做到这一点？

// Toggle design/code
$(".design-n-code").click(function(e) {
    code.toggle();
}); code.hide();

// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
    $(this).addClass('code-active');
} else {
    $(this).removeClass('code-active');
}

Answer 1

您必须将用于检查可见性的逻辑放入click处理程序中。 否则，它将只执行一次，即在脚本执行的整个开始时执行。

// Toggle design/code
$(".design-n-code").click(function() {
    code.toggle();

    // Handles the icon so users know it's active when code is visible.
    if (code.is(':visible')) {
      $(this).addClass('code-active');
    } else {
      $(this).removeClass('code-active');
    }
});
code.hide();

Answer 2

代码可见性的测试应该在处理程序中。 在处理程序中， this是指clicked元素，因此您必须将addClass / removeClass调用到元素#icon-id （将#icon-id为您的正确ID）。

// Toggle design/code
$(".design-n-code").click(function(e) {
    code.toggle();

    // Handles the icon so users know it's active when code is visible.
    if (code.is(':visible')) {
      $('#icon-id').addClass('code-active');
    } else {
      $('#icon-id').removeClass('code-active');
    }
});
code.hide();

Answer 3

您说您有一个锚点，单击该锚点可切换另一个元素div。 单击时使用'this'不会更改其他元素的类。

您会想要这样的东西：

的HTML

<a href="#" id="toggler">CLick me to toggle the other div</a> 
<div id="toBeToggled" class="IsShown">I have class abc</div>

JS

    $('#toggler').click(function() {
        var target = $('#toBeToggled');
        if (target.is(":visible")) {
            target.addClass('IsHidden').removeClass('IsShown');
            target.hide();
            // Demo purposes
            console.log(target.attr('class'));
        } else {
            target.addClass('IsShown').removeClass('IsHidden');
            target.show();
            // Demo purposes
            console.log(target.attr('class'));
        }
    });

JS范例