交换css类

我想使用jQuery在两个链接中交换类。我有一个HTML代码，如：交换css类

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

现在我要点击“显示隐藏”分区某处后替换两个链接的类。

$('#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”格，作品和我需要复制几乎相同的代码来得到它的工作了“showHide2” DIV 。任何人都可以向我展示一个更好的解而不是检查如果类是存在的，然后要么添加或删除其

感谢

的Dawid

来源

2011-05-05 Dawid

备注：页面上的ID应该是唯一的。 – Jeremy 2011-05-05 18:55:09

我看到你的类之间唯一的区别就是'display'。如果这是你所要做的，你可以使用jQuery的.show（）和.hide（）方法（或者fadeIn，fadeOut等等），如果不是的话，上面的两个答案已经被钉住了。 – 2011-05-05 19:00:21

扩大，而不必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 
});

来源

2011-05-05 18:58:05 Chad

+1你的答案比我的完整得多。好样的！ – cdeszaq 2011-05-05 18:59:46

@cdeszaq谢谢，这是你的想法，但是当我写这个时，你所有的只是一个到toggleClass的链接，所以我只是想给出一个代码示例。我看到你编辑了，对不起：P – Chad 2011-05-05 19:01:25

@Chad - 是的，我倾向于抛弃一个快速，快速的答案，然后通常回去并扩大背景和更多信息。 – cdeszaq 2011-05-05 19:03:00

使用.toggleClass()。 .toggleClass()已经为您处理该逻辑。

您的代码将是：

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

注：这假定show和hide班在正确的状态开始。

来源

2011-05-05 18:53:31 cdeszaq

我想您一定你的id和类混合起来试试这个网站：

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

来源

2011-05-05 18:55:48 Neal

你有太多的代码来做这么小的事情。是的，身份证是不可靠的，但有4个变量，而且还有4条线......如果他真的存在，奥卡姆将在他的坟墓中翻滚。 – cdeszaq 2011-05-05 19:02:17

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

来源

2011-05-05 19:07:48

回答

相关问题