Question

我想隐藏/显示多个div，每个div上只有一个按钮（文本按钮正在改变）

其实我有这个：

<a id="btnHideShow">Hide</a>
<div id="divA"></div>


$( "#btnHideShow" ).click(function() {
    if ($.trim($("#btnHideShow").text()) === "Show") {
        $( "#divA" ).show( "fast" );
        $("#btnHideShow").text("Hide");
    } else {
        $( "#divA" ).hide( "fast" );
        $("#btnHideShow").text("Hide");        
    }
});

这适用于这个单一的div，我怎么能为这样的多个div做：

<a id="btnHideShow">Hide</a>
<div id="divA"></div>

<a id="btnHideShow">Hide</a>
<div id="divB"></div>

<a id="btnHideShow">Hide</a>
<div id="divC"></div>

<a id="btnHideShow">Hide</a>
<div id="divD"></div>

提前致谢

Answer 1

假设你无法重构你的HTML代码，你可以使用jQuery的next函数来实现它，这将成为下一个兄弟。

$( "#btnHideShow" ).click(function() {
    var button = $(this),
        buttonSibling = button.next('div:first');

    if (button.text()) === "Show") {
        buttonSibling.show( "fast" );
        button.text("Hide");
    } else {
        buttonSibling.hide( "fast" );
        button.text("Show");        
    }
});

Answer 2

如果这总是你的Dom结构，你可以使用.next（），也可以将你的ID更改为类

<强> HTML

<a class="btnHideShow">Hide</a>

<div id="divA">test</div>
<a class="btnHideShow">Hide</a>

<div id="divB">test</div>
<a class="btnHideShow">Hide</a>

<div id="divC">test</div>
<a class="btnHideShow">Hide</a>

<div id="divD">test</div>

<强> JS

$(".btnHideShow").click(function () {
    if ($.trim($(this).text()) === "Show") {
        $(this).next().show("fast");
        $(this).text("Hide");
    } else {
        $(this).next().hide("fast");
        $(this).text("Show");
    }
});

DEMO

Answer 3

首先，对单个页面上的多个元素使用相同的ID并不好，因此将<a id="btnHideShow">Hide</a>替换为<a class="btnHideShow">Hide</a>

然后试试这个：

<a class="btnHideShow">Hide</a>
<div id="divA">
sdfsdfsdafsad
</div>

<a class="btnHideShow">Hide</a>
<div id="divB">

sdfdsfsdafsda
</div>

<a class="btnHideShow">Hide</a>
<div id="divC">
sdfsdfsdfsdfsdafsd
</div>

<a class="btnHideShow">Hide</a>
<div id="divD">
sdfsdsafasfsda
</div>


<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
    $( ".btnHideShow" ).click(function() {
        $(this).next('div').toggle('slow');
     if($(this).html() == 'Hide'){
        $(this).html("Show");
    }else{
        $(this).html("Hide");
    }
    });
})
</script>

DEMO：http://jsfiddle.net/Lbd4mqqp/

Answer 4

这也有效......

（顺便说一下：避免同一文档中具有相同ID的多个元素！）

<!DOCTYPE html>
<html>
  <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
       $(document).ready(function () {
          $('a').click(function (event) {
             $(this).next().slideToggle( "fast");
             $(this).text($(this).text() === "Hide" ? "Show" : "Hide");
          });
       });
    </script>
    <style>
      .container {
         margin-top : 10px;
      }
      a {
        background : lightgray;
        border : 1px solid black;
      }
    </style>
  <head>
  <body>
     <div class="container">
       <a id="btnHideShowA">Hide</a>
       <div>This is DIV A</div>
     </div>

     <div class="container">
       <a id="btnHideShowB">Hide</a>
       <div>This is DIV B</div>
     </div>

     <div class="container">
       <a id="btnHideShowC">Hide</a>
       <div>This is DIV C</div>
     </div>

     <div class="container">
       <a id="btnHideShowD">Hide</a>
       <div>This is DIV D</div>
     </div>
  </body>
</html>

Jquery：在每个div上用一个按钮隐藏/显示多个div

4 个答案: