我想使用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
答案 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");
});
注意:这假定show
和hide
类以正确的状态开始。
答案 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')
});
答案 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准备好后添加了隐藏。现在,这可能对你很重要,也可能不重要,所以你必须做出决定。