Question

我有这个代码来隐藏show blocks。单击“显示”时，将显示所有块。我该如何解决？

＆＃13;

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

＆＃13;

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

＆＃13;

cd C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn

dtexec.exe /f "\\local\it$\Application Development\.NET Projects\A_ReportingTool\DailyUpload_DEV\DailyUpload\DailyUpload_Client.dtsx"
PAUSE

＆＃13;

Answer 1

试试这个：您多次使用相同的id（show和hide），将其更改为class。使用课程show或hide绑定点击事件。此外，只需显示或div class="block"旁边点击按钮，而不是全部。对于隐藏操作相同，仅隐藏前一个带有class="block"的div。见下面的代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

保留两者的唯一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 3

为每个div和按钮使用不同的id和类

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

Answer 4

ID应该是唯一的。使用class或不同的ID。

您可以使用$(this).next();来播放下一个.block元素，或$(this).prev();使用前一个元素而不是全部元素。

Answer 5

您的选择器会选择类block的所有元素。您只想选择单击按钮的父级内部的那些。像这样：

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

Answer 6

不建议让多个对象具有相同的id。而是尝试使用class。

您可以遍历父级并找到要显示或隐藏的内容。检查以下答案。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

修复秀隐藏块

6 个答案: