jquery切换多个ID

jquery toggle multiple id

本文关键字：ID jquery      更新时间：2023-09-26

我从w3school找到了一个示例程序，我设法对其进行了编辑。 但问题是，它太消耗代码了，我想要的是这段代码的简短版本。可能吗？（我试图将div 放入 php include 中，我使用单个切换函数和多个按钮，但一旦我单击一个按钮，所有div 都会显示）。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#p1").hide();
    $("#p2").hide();
    $("#p3").hide();
    $("#p4").hide();
$("#button1").click(function(){
        $("#p1").toggle();
    });
$("#button2").click(function(){
        $("#p2").toggle();
    });
$("#button3").click(function(){
        $("#p3").toggle();
    });
$("#button4").click(function(){
        $("#p4").toggle();
    });
});
</script>
</head>
<body>
<div id="p1">
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
<button id="button1">Toggle</button>
<br>
<br>
<br>
<div id="p2">
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
<button id="button2">Toggle</button>
<br>
<br>
<br>
<div id="p3">
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
<button id="button3">Toggle</button>
<br>
<br>
<br>
<div id="p4">
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
<button id="button4">Toggle</button>
<br>
<br>
<br>
</body>
</html>

您可以先使用较短的脚本重新组织 HTML。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $(".msg").hide();
        $(".toggle").click(function(){
            $(this).parent( "div" ).find(".msg").toggle();
        });
      });
    </script>
  </head>
  <body>
    <div>
      <div class="msg">
        <p>This is a paragraph with little content.</p>
        <p>This is another small paragraph.</p>
      </div>
    <button class="toggle">Toggle</button>
    </div>
    <br><br><br>
    <div>
      <div class="msg">
        <p>This is a paragraph with little content.</p>
        <p>This is another small paragraph.</p>
      </div>
    <button class="toggle">Toggle</button>
    </div>
    <br><br><br>
    <div>
      <div class="msg">
        <p>This is a paragraph with little content.</p>
        <p>This is another small paragraph.</p>
      </div>
    <button class="toggle">Toggle</button>
    </div>
    <br><br><br>
    <div>
      <div class="msg">
        <p>This is a paragraph with little content.</p>
        <p>This is another small paragraph.</p>
      </div>
    <button class="toggle">Toggle</button>
    </div>
    <br><br><br>
  </body>
</html>

你可以像这样缩短你的代码，只要确保你为html元素添加正确的属性

$(document).ready(function() {
  $(".toggleDiv").hide();
  
  $(".btnToggle").click(function() {
    var div = $(this).attr("data-div");
    $("#" + div).toggle();
  });
});
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
  <div id="p1" class="toggleDiv">
    <p>This is a paragraph with little content.</p>
    <p>This is another small paragraph.</p>
  </div>
  <button id="button1" class="btnToggle" data-div="p1">Toggle</button>
  <br>
  <br>
  <br>
  <div id="p2" class="toggleDiv">
    <p>This is a paragraph with little content.</p>
    <p>This is another small paragraph.</p>
  </div>
  <button id="button2" class="btnToggle" data-div="p2">Toggle</button>
  <br>
  <br>
  <br>
  <div id="p3" class="toggleDiv">
    <p>This is a paragraph with little content.</p>
    <p>This is another small paragraph.</p>
  </div>
  <button id="button3" class="btnToggle" data-div="p3">Toggle</button>
  <br>
  <br>
  <br>
  <div id="p4" class="toggleDiv">
    <p>This is a paragraph with little content.</p>
    <p>This is another small paragraph.</p>
  </div>
  <button id="button4" class="btnToggle" data-div="p4">Toggle</button>
  <br>
  <br>
  <br>
</body>
</html>

相关文章：