ボタンをクリックしたときに同じクラス名のdiv要素を非表示/表示する

Question

ここでは、box1の中にあるボタンをクリックすると、box2とbox3を非表示または表示したいと考えています。また、クラスボックスは動的に繰り返されます。だから私はボタンをクリックするたびにクラスbox2とボックス3を特定のクラスボックスに関連付けて表示/非表示にするだけでなく、すべてのクラスからbox2とbox3要素を表示します。私を助けてください。また、このキーワードを使用してこの問題を解決できる方が良いでしょう。ありがとうございました。以下は私のhtmlとjqueryのコードです。

$(document).ready(function() { 
 
    $(".box2").hide(); 
 
    $(".box3").hide(); 
 

 
    $('.see').click(function() { 
 
    var value = $(this).attr('value'); 
 
    $('.box2').toggle('fast'); 
 
    $('.box3').toggle('fast'); 
 

 
    if (value == 'See More') { 
 
     $(this).attr('value', 'See Less'); 
 
    } else if (value == 'See Less') { 
 
     $(this).attr('value', 'See More'); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="Box"> 
 
    <div class="box1"> 
 
    <input type="button" class="see" value="See More" /> 
 
    </div> 
 
    <div class="box2"> 
 
    </div> 
 
    <hr /> 
 
    <div class="box3"> 
 
    </div> 
 
</div>

Answer 1

使用$(this).closest(".Box")クリックされたボタンが含まれているボックスを検索します。そこから.box2と.box3を同じボックスに見つけることができます。

また、.val()を使用して要素の値を取得および設定します。

$(document).ready(function() { 
 
    $(".box2, .box3").hide(); 
 

 
    $('.see').click(function() { 
 
    $(this).closest(".Box").find(".box2, .box3").toggle('fast'); 
 
    $(this).val(function(i, value) { 
 
     return value == 'See More' ? 'See Less' : 'See More'; 
 
    }); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="Box"> 
 
    <div class="box1"> 
 
    <input type="button" class="see" value="See More" /> 
 
    </div> 
 
    <div class="box2"> 
 
    Box 2 
 
    </div> 
 

 
    <hr /> 
 
    <div class="box3"> 
 
    Box 3 
 
    </div> 
 
</div> 
 

 
<hr style="height: 2px; border: none; background-color: #000;"> 
 

 
<div class="Box"> 
 
    <div class="box1"> 
 
    <input type="button" class="see" value="See More" /> 
 
    </div> 
 
    <div class="box2"> 
 
    Box 2 
 
    </div> 
 

 
    <hr /> 
 
    <div class="box3"> 
 
    Box 3 
 
    </div> 
 
</div>