我们可以缩小此代码吗?
$("#button1").click(function(){
$("#info1").toggle('slow');
});
$("#button2").click(function(){
$("#info2").toggle('slow');
});
$("#button3").click(function(){
$("#info3").toggle('slow');
});
$("#button4").click(function(){
$("#info4").toggle('slow');
});
$("#button5").click(function(){
$("#info5").toggle('slow');
});
$("#button6").click(function(){
$("#info6").toggle('slow');
});
$("#button7").click(function(){
$("#info7").toggle('slow');
});
答案 0 :(得分:2)
尝试
$("[id^='button']").click(function(){
$("#info" + ($(this).index())).toggle('slow');
});
而不是按钮ID使用公共类,如.button
$(".button").click(function(){
$("#info" + ($(this).index() + 1)).toggle('slow');
});
$("[id^='button']").click(function(){
$("#info" + this.id.replace("button", "")).toggle('slow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button1" class="button">button1</div>
<div id="button2" class="button">button2</div>
<div id="button3" class="button">button3</div>
<div id="button4" class="button">button4</div>
<div id="button5" class="button">button5</div>
<div id="info1" class="button">info1</div>
<div id="info2" class="button">info2</div>
<div id="info3" class="button">info3</div>
<div id="info4" class="button">info4</div>
<div id="info5" class="button">info5</div>
&#13;
答案 1 :(得分:2)
以下代码与您的代码相同:
for(i=1;i<8;i++) $("#button"+i).click(function({$("#info"+i).toggle('slow');});
答案 2 :(得分:2)
其他答案已涵盖各种快速修复,但如果您可以修改页面的HTML,也许您可以考虑使用更具说明性的方法:
<button type='button' id='button1' aria-controls='info1'>Button 1</button>
<button type='button' id='button2' aria-controls='info2'>Button 2</button>
<button type='button' id='button3' aria-controls='info3'>Button 3</button>
<!-- rest of buttons -->
$('button[aria-controls]').click(function () {
$(document.getElementById($(this).attr('aria-controls'))).toggle('slow');
});
答案 3 :(得分:1)
使用属性start with selector来定位以id按钮开头的按钮元素。然后从当前单击的元素id中评估单击处理程序中的整数值,以使选择器成为目标相关的信息元素。像这样:
$("[id^=button]").click(function(){
$('#info'+ this.id.match(/\d+$/)[0]).toggle('slow');
});
<强> Working Demo 强>