交换css类

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