Fixing show hide blocks

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

Держите уникальный идентификатор для обоих, и это будет решить вашу проблему:

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 должен быть уникальным. Вместо этого используйте класс или разные идентификаторы.

И вы можете использовать $(this).next();, чтобы играть со следующим элементом .block или $(this).prev(); с предыдущим, а не всем.

Answer 3

Попробуйте это: Вы используете же id (show и hide) несколько раз, изменить это class. Привязать событие клика, используя класс show или hide. Кроме того, просто покажите или div с class="block", который находится рядом с нажатой кнопкой и не все. То же самое для действия hide, скрыть только предыдущий div с class="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

Ваш селектор выбирает все элементы класса block. Вы хотите только выбрать те, которые находятся внутри родителя нажатой кнопки. Как так:

$("#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>