jquery切换多个ID

我从w3school找到一个示例程序，并且我设法编辑它。但问题是，它太耗费代码，我想要的是这个代码的简短版本。可能吗？（我试图把该div在PHP包括，我使用一个单一的切换功能和多个按钮，但一旦我点击一个按钮所有的div显示）。jquery切换多个ID

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

来源

2016-01-29 Mark Gerryl Mirandilla

你可以先和较短的重新组织的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>

来源

2016-01-29 02:33:35 daniel

你的代码工作完美！但在我的实际代码没有工作..错误是在我的代码.. –

我想你没有**

** to contain both the message and button **

**作为一个组。你可以从按钮的角度看到，它得到**父div **，然后在这个div中找到** msg div **，所以只选择这个组的消息而不是所有的消息。 – daniel

您可以缩短这样的代码只是确保你添加适当的属性添加到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>

来源

2016-01-29 02:17:07 progrAmmar

它工作的先生，但我想要的只是那些4按钮称为单格， –

我试试这个，你给了我一个想法 –

按钮的数据格属性。把你想要调用的div的ID :) – progrAmmar

jquery切换多个ID

回答

相关问题