javascript - JS 直接在元素上方定位一个类

Question

我正在尝试使用 jQuery 向元素添加/删除一个类，但我只想定位直接在“ .trigger ”上方的“ .content ”类，基本上使每个类都相互独立。

关于最好的方法的任何想法？

提前致谢

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()它只会针对.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');
  });
});

小提琴

此方法将允许.content位于容器中的任何位置，无论是在容器之前还是之后.trigger