JS将类定位在元素的正上方

JS Target a class directly above element

本文关键字：元素 定位 JS      更新时间：2023-09-26

我正试图使用jQuery向元素添加/删除一个类，但我只想将目标锁定在'.content'类上，该类位于'.trick'的正上方，本质上使每个类独立工作。

有什么最好的方法吗？

提前感谢

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>

尝试使用仅针对.content元素的.prev()，该元素是.trigger元素的前一个同级元素：

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

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

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

Fiddle

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

相关文章：