javascript - 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() 只会针对 .content 元素，该元素是 .trigger 元素的前一个同级元素:

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