Javascript jquery切换多个id
我从w3school找到了一个示例程序，并设法对其进行了编辑。但问题是，它太消耗代码了，我想要的是这个代码的一个简短版本。可能吗？ 我试着把div放在php include中，我使用了一个切换函数和多个按钮，但是一旦我点击一个按钮，所有div都会显示出来Javascript jquery切换多个id,javascript,jquery,Javascript,Jquery,我从w3school找到了一个示例程序，并设法对其进行了编辑。但问题是，它太消耗代码了，我想要的是这个代码的一个简短版本。可能吗？ 我试着把div放在php include中，我使用了一个切换函数和多个按钮，但是一旦我点击一个按钮，所有div都会显示出来 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery
<!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元素添加正确的属性即可 $document.readyfunction{ $.toggleDiv.hide； $.btnToggle.clickfunction{ var div=$this.attrdata-div； $+div.toggle； }; }; 这是一段内容很少的段落 这是另一小段 切换 这是一段内容很少的段落 这是另一小段 切换 这是一段内容很少的段落 这是另一小段 切换 这是一段内容很少的段落 这是另一小段 切换
您可以像这样缩短代码，只要确保向html元素添加正确的属性即可 $document.readyfunction{ $.toggleDiv.hide； $.btnToggle.clickfunction{ var div=$this.attrdata-div； $+div.toggle； }; }; 这是一段内容很少的段落 这是另一小段 切换 这是一段内容很少的段落 这是另一小段 切换 这是一段内容很少的段落 这是另一小段 切换 这是一段内容很少的段落 这是另一小段 切换
您可以先用较短的脚本重新组织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
<!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>
它可以工作，先生，但我想要的只是一个由4个按钮调用的div，我试一下你给我的这个按钮的data div属性。把你要调用的div的id放进去：它可以工作，先生，但我只想用4个按钮调用一个div，我试一下你给我的这个按钮的data div属性。输入你想调用的div的id：你的代码工作得很好！但是在我的实际代码中没有起作用。。错误在我的代码中。我想您不必将消息和按钮作为一个组来包含。您可以看到，从按钮的角度来看，它得到了父div，然后在这个div中，它找到了msg div，因此只选择了这个组的消息，而不是所有消息。您的代码工作得非常完美！但是在我的实际代码中没有起作用。。错误在我的代码中。我想您不必将消息和按钮作为一个组来包含。您可以看到，从按钮的角度来看，它获取父div，然后在这个div中找到msg div，因此只选择了该组的消息，而不是所有消息。