jquery – 如何在Click上获得正确的选择器？

2023年9月7日 210次阅读

我需要你的帮助.

我点击时尝试获得正确的选择器,但问题是它显示所有父母的div.

<div class="item">
    <a href="">element1</a> <span>span1</span> <br>
    <a href="">element10</a> <span>span10</span> <br>
</div>

<div class="item">
    <a href="">element2</a> <span>span2</span><br>
    <a href="">element20</a> <span>span20</span><br>
</div>

<div class="item">
    <a href="">element3</a> <span>span3</span><br>
    <a href="">element30</a> <span>span30</span><br>
</div>

<div class="item">
    <a href="">element4</a> <span>span4</span><br>
    <a href="">element40</a> <span>span40</span><br>
</div>

JS代码：

$('.item span').hide();

$('.item a').click(function(){

    // hide all span
    var $this = $(this).parent().find('span');
    $(".item span").not($this).hide();

    // here is what I want to do
    $this.toggle();

});

例如：
http://jsfiddle.net/BGSyS/637/

我想,当我点击“Element10”时,只有span10显示而不是span1
你能帮助我吗？谢谢.

最佳答案 在这种情况下尝试使用
.next()来简化您的工作,

var items = $('.item span').hide();
$('.item a').click(function(e){
    e.preventDefault();
    items.not($(this).next('span').toggle()).hide();
});

DEMO

点赞