show hideブロックを固定する

Question

私はこのブロックを隠すためにこのコードを持っています。表示をクリックすると、すべてのブロックが表示されます。どうすれば修正できますか？

$(document).ready(function(){ 
 
    
 
    $("#hide").click(function(){$(".block").hide();}); 
 
    $("#show").click(function(){$(".block").show();}); 
 
    
 
});

.block{background: grey; width: 350px; height: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<button id="show">Show</button> 
 
<div class="block">If you click on the "Hide" button, I will disappear.</div> 
 
<button id="hide">Hide</button> 
 
</div> 
 

 
<div> 
 
<button id="show">Show</button> 
 
<div class="block">If you click on the "Hide" button, I will disappear.</div> 
 
<button id="hide">Hide</button> 
 
</div>

Answer 1

の両方のための固有のIDを維持し、それはあなたの問題を解決します：

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
<button id="show1">Show</button> 
<div id="block1">If you click on the "Hide" button, I will disappear.</div> 
<button id="hide1">Hide</button> 
</div> 

<div> 
<button id="show2">Show</button> 
<div id="block2">If you click on the "Hide" button, I will disappear.</div> 
<button id="hide2">Hide</button> 
</div> 

JS

$(document).ready(function(){ 

      $("#hide1").click(function(){$("#block1").hide();}); 
      $("#show1").click(function(){$("#block1").show();}); 
      $("#hide2").click(function(){$("#block2").hide();}); 
      $("#show2").click(function(){$("#block2").show();}); 

     }); 

JSFIDDLE：https://jsfiddle.net/mayank_shubham/ox9mbr70/

Answer 2

ID一意である必要があります。クラスを代わりに使用するか、異なるIDを使用します。

$(this).next();を使用すると、次の.block要素または$(this).prev();要素で再生することができます。

Answer 3

これを試してください：同じid（showとhide）を複数回使用している場合は、これをclassに変更してください。クラスshowまたはhideを使用して、クリックイベントをバインドします。また、divをclass="block"と表示するだけで、すべてではなくクリックしたボタンの隣に表示されます。非表示のアクションと同じで、前のdivだけをclass="block"で非表示にします。あなたのセレクタは、クラスblockのすべての要素を選択し、コード

$(document).ready(function(){ 
 
    
 
    $("button.hide").click(function(){$(this).prev(".block").hide();}); 
 
    $("button.show").click(function(){$(this).next(".block").show();}); 
 
    
 
});

.block{background: grey; width: 350px; height: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<button class="show">Show</button> 
 
<div class="block">If you click on the "Hide" button, I will disappear.</div> 
 
<button class="hide">Hide</button> 
 
</div> 
 

 
<div> 
 
<button class="show">Show</button> 
 
<div class="block">If you click on the "Hide" button, I will disappear.</div> 
 
<button class="hide">Hide</button> 
 
</div>

Answer 4

の下を参照してください。あなたは、クリックされたボタンの親の内側にあるものだけを選択したいと思う。これと同じように：

$("#hide").click(function(){$(this).parent().children(".block").hide();}); 
$("#show").click(function(){$(this).parent().children(".block").show();}); 

Answer 5

使用異なるIDとすべてのdivのためのクラスとボタン

$(document).ready(function(){ 
    $("#hide1").click(function(){$(".block1").hide();}); 
    $("#show1").click(function(){$(".block1").show();}); 
    $("#hide2").click(function(){$(".block2").hide();}); 
    $("#show2").click(function(){$(".block2").show();}); 
}); 

Answer 6

それは同じidで複数のオブジェクトを持つことをお勧めではありません。代わりにclassをお試しください。

親をトラバースして、表示または非表示にするコンテンツを見つけることができます。以下の回答を確認してください。助けのための

$(document).ready(function() { 
 

 
    $(".hide").click(function() { 
 
    $(this).parent().find(".block").hide(); 
 
    }); 
 
    $(".show").click(function() { 
 
    $(this).parent().find(".block").show(); 
 
    }); 
 

 
});

.block { 
 
    background: grey; 
 
    width: 350px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button class="show">Show</button> 
 
    <div class="block">If you click on the "Hide" button, I will disappear.</div> 
 
    <button class="hide">Hide</button> 
 
</div> 
 

 
<div> 
 
    <button class="show">Show</button> 
 
    <div class="block">If you click on the "Hide" button, I will disappear.</div> 
 
    <button class="hide">Hide</button> 
 
</div>