交换css类

时间:2011-05-05 18:50:16

标签: javascript jquery class html

我想使用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

4 个答案:

答案 0 :(得分:5)

要扩展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
});

答案 1 :(得分:1)

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

您的代码将是:

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

注意:这假定showhide类以正确的状态开始。

答案 2 :(得分:0)

我认为你已经把你的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/

答案 3 :(得分:0)

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准备好后添加了隐藏。现在,这可能对你很重要,也可能不重要,所以你必须做出决定。