Question

我想使用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。有谁能告诉我一个更好的解决方案？

由于

的Dawid

Answer 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
});

Answer 2

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

您的代码将是：

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

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

Answer 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/

Answer 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，他们仍然可以看到所有内容。它可能导致闪存的无格式内容（不完全，但基本上），因为您在DOM通过JavaScript准备好后添加了隐藏。现在，这可能对你很重要，也可能不重要，所以你必须做出决定。

交换css类

4 个答案: