2

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>
4

2 に答える 2

3

を使用することもできますsiblings()。同じコンテナ内のすべてのもののみを対象とします

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

フィドル

このメソッドを使用する.contentと、コンテナ内のどこにでも、コンテナの前後に配置できます。.trigger

于 2013-08-02T21:18:31.413 に答える