JS直接在元素上面定位一个类

Question

我正在尝试使用jQuery向一个元素添加/删除一个类但我只想定位在' .trigger <正上方的' .content '类/ strong>'基本上使每个工作彼此独立。

有关最佳方法的任何想法吗？

提前致谢

HTML

<div class="instance">
    <span class="content showHide">this is hidden</span>
    <a href="#" class="trigger">trigger</a>
</div>


<br />

<div class="instance">
    <span class="content showHide">this is hidden</span>
    <a href="#" class="trigger">trigger</a>
</div>


<br />

<div class="instance">
    <span class="content showHide">this is hidden</span>
    <a href="#" class="trigger">trigger</a>
</div>

CSS

<style type="text/css">

.showHide{
    display: none;
}

</style>

JS

<script type="text/javascript">
         $(document).ready(function(){

            $('.instance a.trigger').click(function(){
                $('span.content').toggleClass('showHide');
            });
        });
</script>

Answer 1

尝试使用 .prev() ，该{strong> {{3}} 仅定位.content元素的前一个兄弟.trigger元素：

$(document).ready(function(){
    $('.instance a.trigger').click(function(){
        $(this).prev('span.content').toggleClass('showHide');
    });
});

Answer 2

您也可以使用siblings()。它只会针对同一容器中的所有内容

$(document).ready(function(){
  $('.instance a.trigger').click(function(){
    $(this).siblings('span.content').toggleClass('showHide');
  });
});

Fiddle

此方法允许.content位于容器中的任何位置，无论是.trigger

之前还是之后