Javascript JS将一个类直接指向元素上方

我试图使用jQuery向元素添加/删除一个类，但我只想针对“.content”类，该类直接位于“.trigger”之上，本质上使每个类彼此独立工作

有什么好办法吗

提前谢谢

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>

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

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

.展示皮{
显示：无；
}

JS

<style type="text/css">

.showHide{
    display: none;
}

</style>

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

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

$（文档）.ready（函数（）{
$（'.instance a.trigger'）。单击（function（）{
$（'span.content'）.toggleClass（'showHide'）；
});
});

尝试使用只针对

.content

元素的，该元素是

的前一个同级元素。trigger

元素：

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

你也可以使用。它将只针对同一容器中的所有内容

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

---

此方法将允许

.content

位于容器中的任何位置，无论是在

触发器之前还是之后。谢谢，非常有用！