Question

单击按钮时，我想要取消隐藏的大约10个DIV。我知道怎么做..但我想为每个DIV使用相同的按钮？或者单击时按钮会消失，因此它显示DIV但隐藏了用于单击它的按钮？这样的事情甚至可能吗？

以下是我尝试使用的代码..

<script type="text/javascipt">
var btns = document.querySelectorAll(".hideDiv");

// Set up event handlers for each
for(var i = 0; i < btns.length; ++i){
  btns[i].addEventListener("click", function(){
    this.nextElementSibling.classList.remove("hidden");
    this.classList.add("hidden");
  });
}

    </script>

{{1}}

Answer 1

例如，您可以使用带有ID＆＃34;按钮＆＃34;的按钮，并使用jquery显示div并隐藏按钮。 $("#button").click(function(){ $("div").show(); $("#button").hide(); });

Answer 2

这样的事情：

＆＃13;

// Get all the buttons
var btns = document.querySelectorAll(".hideDiv");

// Set up event handlers for each
for(var i = 0; i < btns.length; ++i){
  btns[i].addEventListener("click", function(){
    this.nextElementSibling.classList.remove("hidden");
    this.classList.add("hidden");
  });
}

＆＃13;

div.hidden, button { float:left; }
.hidden { display:none; }
.row { clear:both; }

＆＃13;

<div class="row">
 <button class="hideDiv">Unhide this row</button>
 <div class="hidden">Hello</div>
</div>
<div class="row">
 <button class="hideDiv">Unhide this row</button>
 <div class="hidden">Hello</div>
</div>
<div class="row">
 <button class="hideDiv">Unhide this row</button>
 <div class="hidden">Hello</div>
</div>
<div class="row">
 <button class="hideDiv">Unhide this row</button>
 <div class="hidden">Hello</div>
</div>
<div class="row">
 <button class="hideDiv">Unhide this row</button>
 <div class="hidden">Hello</div>
</div>

＆＃13;

Jquery / Javascript取消隐藏div但点击时隐藏按钮？

2 个答案: