jquery 中的编码水龙头
coding taps in jquery
我是 jquery 的新手,我在选择其中的元素时遇到问题。
在此代码中,我想显示和隐藏 "contents" div,它们与我点击的 li 具有相同的 class。它应该像水龙头一样工作。
所以我写了这段代码,但它不起作用。
$('.menu li').click(
function() {
var x = this.attr("class");
$('.contents').children().hasClass(x).show();
$('.contents').children().not(hasClass(x)).hide();
}
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu ">
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
</ul>
</div>
<div class="contents">
<div class="one" style="background-color:red"></div>
<div class="two" style="display: none; background-color:yellow"></div>
<div class="three" style="display: none; background-color:orange"></div>
</div>
我什至不确定这种方法是否是正确的方法!
class 属性的问题在于它们可以以任何特定顺序保存多个任意值。这使得它们不适合精确匹配定位。
我会为您的 <div>
元素提供 id
属性,并在 <li>
元素上使用另一个属性来定位这些 ID。例如
<li class="one" data-target="one">
和
<div class="one" id="one">
在你的 jQuery
$('.menu li[data-target]').on('click', function() {
var targetId = this.getAttribute('data-target')
$('.contents div').each(function() {
$(this).toggle(this.id === targetId)
})
})
我是 jquery 的新手,我在选择其中的元素时遇到问题。 在此代码中,我想显示和隐藏 "contents" div,它们与我点击的 li 具有相同的 class。它应该像水龙头一样工作。 所以我写了这段代码,但它不起作用。
$('.menu li').click(
function() {
var x = this.attr("class");
$('.contents').children().hasClass(x).show();
$('.contents').children().not(hasClass(x)).hide();
}
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu ">
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
</ul>
</div>
<div class="contents">
<div class="one" style="background-color:red"></div>
<div class="two" style="display: none; background-color:yellow"></div>
<div class="three" style="display: none; background-color:orange"></div>
</div>
我什至不确定这种方法是否是正确的方法!
class 属性的问题在于它们可以以任何特定顺序保存多个任意值。这使得它们不适合精确匹配定位。
我会为您的 <div>
元素提供 id
属性,并在 <li>
元素上使用另一个属性来定位这些 ID。例如
<li class="one" data-target="one">
和
<div class="one" id="one">
在你的 jQuery
$('.menu li[data-target]').on('click', function() {
var targetId = this.getAttribute('data-target')
$('.contents div').each(function() {
$(this).toggle(this.id === targetId)
})
})