交换 css 类答案

【问题标题】：Swap css class交换 css 类
【发布时间】：2011-05-05 18:50:15
【问题描述】：

我想使用 jQuery 在两个链接中交换类。我得到了一个 HTML 代码，例如：

<div class="showHide1">
   <a id="aaa" class="show">AAA</a>
   <a id="bbb" class="hide">BBB</a>
</div>

<div class="showHide2">
   <a id="aaa" class="show">AAA</a>
   <a id="bbb" class="hide">BBB</a>
</div>

还有一个简单的 .css 文件：

.show {
    display: block;
}

.hide {
    display: none;
}

现在我想在单击“showHide”div 的某个位置后交换两个链接中的类。

$('#showHide1').click(function() {
    if ($("#aaa").hasClass('show')) {
        $("#aaa").attr("class","hide");
    }
    else {
        $("#aaa").attr("class","show");
    }

    if ($("#bbb").hasClass('hide')) {
        $("#bbb").attr("class","show");
    }
    else {
        $("#bbb").attr("class","hide");
    } `

我确信有更好的方法来解决这个问题，因为这仅适用于“showHide1”div，我必须复制几乎相同的代码才能使其适用于“showHide2”div。谁能告诉我一个更好的解决方案？

谢谢

大卫

【问题讨论】：

旁注：页面上的 id 应该是唯一的。
我看到你们的课程之间的唯一区别是display。如果这就是你想要做的所有事情，你可以使用 jQuery 的 .show() 和 .hide() 方法（或fadeIn、fadeOut 等）如果没有，以上两个答案已经确定了。

标签： javascript jquery class html

【解决方案1】：

要扩展 cdeszaq 的答案，而不是 .show 和 .hide 只使用 .hide 然后您可以使用以下内容：

HTML：

<div id="showHide1" class="showHide">
   <a id="aaa">AAA</a>
   <a id="bbb" class="hide">BBB</a>
</div>

<div id="showHide2" class="showHide">
   <a id="aaa">AAA</a>
   <a id="bbb" class="hide">BBB</a>
</div>

CSS：

.hide {
    display: none;
}

JS：

$('.showHide').click(function() {
   $('a', this).toggleClass('hide'); //I had inverted my selector and context earlier, this is correct
});

【讨论】：

@cdeszaq 谢谢，这是你的主意，但当我写这篇文章时，你只有一个 toggleClass 的链接，所以我只想给出一个代码示例。我看到你编辑了，对不起：P
@Chad - 是的，我倾向于给出一个快速、快速的答案，然后通常返回并扩展上下文和更多信息。
@Drackir - 为什么？我最初的回答总是回答所提出的问题，而不仅仅是一个 1/2 的回答尝试。对于许多问题，完全回答问题并不需要太多。但是，我更喜欢当我回去时，更多的是教育和提供我的答案背后的推理。这不就是编辑帖子的功能吗？
这正是我想要的！谢谢
@cdeszaq - 因为我曾多次努力通过示例和链接编写一个好的答案，结果却被写了“是的你可以”然后编辑他们的答案的人“击败”在 5 分钟内。

【解决方案2】：

使用.toggleClass() 而不是检查类是否存在，然后添加或删除它。 .toggleClass() 已经为你处理好这个逻辑了。

您的代码将是：

$('#showHide1').click(function() {
    $("#aaa")
        .toggleClass("hide")
        .toggleClass("hide");
    $("#bbb")
        .toggleClass("hide")
        .toggleClass("hide");
});

注意：这假定 show 和 hide 类以正确的状态开始。

【讨论】：

【解决方案3】：

我认为你把你的 id 和类弄混了试试这个 html：

<div id="showHide1">
   <a class="show aaa">AAA</a>
   <a class="hide bbb">BBB</a>
</div>

<div id="showHide2">
   <a class="show aaa">AAA</a>
   <a class="hide bbb">BBB</a>
</div>

js:

$('#showHide1, #showHide2').click(function() {
    var a_showing = $('.aaa.show', this);
    var a_hiding  = $('.aaa.hide', this);
    var b_showing = $('.bbb.show', this);
    var b_hiding  = $('.bbb.hide', this);
    a_showing.addClass('hide').removeClass('show')
    a_hiding.addClass('show').removeClass('hide')
    b_showing.addClass('hide').removeClass('show')
    b_hiding.addClass('show').removeClass('hide')
});

小提琴：http://jsfiddle.net/maniator/qMBRq/

【讨论】：

你有这么多代码来做这么小的事情。是的，ID 很不稳定，但有 4 个变量，还有 4 行……如果奥卡姆真的存在，他会在他的坟墓里翻滚。

【解决方案4】：

This 我会这样做。

HTML

<div class="showhide">
   <a id="aaa1" class="show">AAA</a>
   <a id="bbb1" class="hide">BBB</a>
</div>

<div class="showhide">
   <a id="aaa2" class="show">AAA</a>
   <a id="bbb2" class="hide">BBB</a>
</div>

JavaScript

$(function() { 
    $('a.hide').hide();
    $('div.showhide').click(function() {
        $(this).children('a').toggle();
    });
});

这样，如果用户没有启用 JavaScript，他们仍然可以看到所有内容。它可能会导致 flash of unstyled content（不完全是，但基本上），因为您是在通过 JavaScript 准备好 DOM 之后添加隐藏。现在，这对您来说可能重要也可能不重要，因此您必须做出决定。

【讨论】：