Question

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

Answer 1

您可以像这样缩短代码，只需确保为html元素添加适当的属性

＆＃13;

$(document).ready(function() {
  $(".toggleDiv").hide();
  

  $(".btnToggle").click(function() {
    var div = $(this).attr("data-div");
    $("#" + div).toggle();
  });


});

＆＃13;

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

＆＃13;

Answer 2

您可以先使用较短的脚本重新组织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>

jquery切换多个id

2 个答案: