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

单击锚点时，我有一个div切换。我试图通过类改变一个图标，当div是可见的，当它隐藏，但代码不工作。JQuery - 隐藏/可见时更改元素的CSS

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

// 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'); 
}

来源

2013-12-22 Michael Schwartz

代码可见性测试应该在处理程序中。在处理程序中，this指的是单击的元素，因此您必须调用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();

来源

2013-12-22 16:56:10

您必须将用于检查可见性的逻辑放入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();

来源

2013-12-22 16:38:54 ComFreek

@Downvoter：请提供评论解释你的理由。 – ComFreek

道歉，我正在向下滚动回答，并明显发生点击向下投票按钮。 – aztechy

@aztechy哈哈，没问题。我编辑了我的答案，以便您可以自由删除您的downvote：D – ComFreek

你说你有一个锚点，当点击时，切换另一个元素，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>

$('#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 FIDDLE EXAMPLE

来源

2013-12-22 16:56:31 aztechy

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

回答

相关问题