jQuery。在元素之间切换答案

【问题标题】：jQuery. Switching between elementsjQuery。在元素之间切换
【发布时间】：2011-06-22 10:29:46
【问题描述】：

我有这个 html 代码

<a href="#">Link</a>
<div>Content</div>
<a href="#">Link</a>
<div>Content</div>

还有这个 jQuery

$('a').click(
function(){
    $("div:visible").slideUp(100),
    $(this).next("div:hidden").slideDown(100),
    $('a').css({"font-weight" : "normal"}),
    $(this).css({"font-weight" : "bold"});
});

这个想法是，在我单击链接后，下一个 div 变得可见。链接本身变为粗体。单击另一个链接会隐藏任何可见的 div，从任何链接中删除粗体并打开新的 div 并使另一个链接变为粗体。

很简单，而且工作正常，只有一个例外：在我第二次点击同一个链接后，我不需要它是粗体。我知道这是由于 jQuery 代码的最后一行而发生的，但找不到其他解决方案。

谢谢！

【问题讨论】：

您真的希望链接在第二次点击时从粗体变为正常吗？还是只是为了保持大胆？

标签： jquery toggle switch-statement

【解决方案1】：

您可以检查当前链接是否已经是粗体。如果没有，那就这样吧。

if ($(this).css("font-weight") != "bold") {
  $(this).css({"font-weight" : "bold"});
}

【讨论】：

【解决方案2】：

您可以使用 jQuery.data 函数来存储有关 DOM 元素的元数据。

所以在你的情况下，改变最后一行：

$(this).css({"font-weight" : "bold"});

到：

if ($(this).data('clicked') == undefined) $(this).css({"font-weight" : "bold"});
$(this).data('clicked', true);

享受吧！

【讨论】：

不错的解决方案，但这只能工作一次。在我第三次点击链接后，它不会变成粗体。
我可以在第二次点击链接后删除该数据吗？我认为这会让它再次变得大胆。

【解决方案3】：

在这种情况下使用toggleClass()

在你的 css 中写下这个 -

.normal{"font-weight" : "normal"}
.bold{"font-weight" : "bold"}

在 jquery 中 -

$('a').click(  function(){ 

$('a.bold').removeClass('bold'); // will remove bold class from all link   

$("div:visible").slideUp(100),     
 $(this).next("div:hidden").slideDown(100)      

$(this).toggleClass('normal bold') ;

});

【讨论】：

在我认为的类名列表中需要引号
这很酷，但在这种情况下切换不适用。当我单击该链接两次时，它可以按我的需要工作。但是如果我点击另一个链接，第一个链接就不会变成“正常”。
所以在这种情况下，您可以做的是-为当前单击的链接分配一个类，当您单击不同的链接时，从上一个链接中删除类并将该类分配给当前链接
你可以参考这篇文章，因为我做过类似的事情-stackoverflow.com/questions/4647098/…
分配课程不是和我在这里做的一样，而是用不同的话：$('a').css({"font-weight" : "normal"}), $(this).css({"font-weight" : "bold"});