Jquery：隐藏/显示多个div，每个div上只有一个按钮_Jquery_Html

Jquery：隐藏/显示多个div，每个div上只有一个按钮

jquery html

Jquery：隐藏/显示多个div，每个div上只有一个按钮,jquery,html,Jquery,Html,我想用每个div上的单个按钮隐藏/显示多个div（文本按钮正在更改）其实我有这个, <a id="btnHideShow">Hide</a> <div id="divA"></div> $( "#btnHideShow" ).click(function() { if ($.trim($("#btnHideShow").text()) === "Show") { $( "#divA" ).show( "fast" );

我想用每个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");        
    }
});

隐藏
$（“#btnHideShow”）。单击（函数（）{
if（$.trim（$（“#btnHideShow”）.text（））==“Show”）{
$（#divA”）。show（“fast”）；
$（“#btnHideShow”）.text（“隐藏”）；
}否则{
$（“女主角”）。隐藏（“快速”）；
$（“#btnHideShow”）.text（“隐藏”）；
}
});

它适用于单个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>

隐藏
隐藏
隐藏
隐藏

提前感谢

假设您不能重构HTML代码，您可以使用jQuery的函数进行重构，它将获得下一个同级

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

如果这始终是您的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>

首先，在一个页面上对多个元素使用相同的id是不好的，因此替换

这也可以
（顺便说一句：在同一文档中避免使用具有相同id的多个元素！）

$（文档）.ready（函数（）{
$（'a'）。单击（函数（事件）{
$（this.next（）.slideToggle（“fast”）；
$（this）.text（$（this.text（）===“隐藏”？“显示”：“隐藏”）；
});
});
.集装箱{
边缘顶部：10px；
}
a{
背景：浅灰色；
边框：1px纯黑；
}
隐藏
这是A组
隐藏
这是B组
隐藏
我是C组
隐藏
这是D组
单击任何btnHideShow时，是否要隐藏所有（divA、divB、divC、divD）？您不应该对id'sThx使用相同的名称，但只有文本在更改，我在和之间有一些元素。抱歉，我没有了解到，只有文本在更改意味着…？如果我没有错，您希望在a（锚定）标记旁边显示/隐藏div。。我说得对吗？文本按钮在“隐藏/显示”中切换，但div没有隐藏。在标记和标记之间，我有一些标记，你是否使用与上面所写相同的html结构给所有潜水提供一个公共类，你想在锚点击时隐藏这些潜水
$(".btnHideShow").click(function () {
    if ($.trim($(this).text()) === "Show") {
        $(this).next().show("fast");
        $(this).text("Hide");
    } else {
        $(this).next().hide("fast");
        $(this).text("Show");
    }
});

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

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