Question

我们可以缩小此代码吗？

$("#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');
});

Answer 1

尝试

$("[id^='button']").click(function(){
    $("#info" + ($(this).index())).toggle('slow');
});

而不是按钮ID使用公共类，如.button

$(".button").click(function(){
    $("#info" + ($(this).index() + 1)).toggle('slow');
});

＆＃13;

$("[id^='button']").click(function(){
        $("#info" + this.id.replace("button", "")).toggle('slow');
 });

＆＃13;

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

Answer 2

以下代码与您的代码相同：

for(i=1;i<8;i++) $("#button"+i).click(function({$("#info"+i).toggle('slow');});

Answer 3

其他答案已涵盖各种快速修复，但如果您可以修改页面的HTML，也许您可以考虑使用更具说明性的方法：

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

的jQuery

$('button[aria-controls]').click(function () {
    $(document.getElementById($(this).attr('aria-controls'))).toggle('slow');
});

Answer 4

使用属性start with selector来定位以id按钮开头的按钮元素。然后从当前单击的元素id中评估单击处理程序中的整数值，以使选择器成为目标相关的信息元素。像这样：

$("[id^=button]").click(function(){
  $('#info'+ this.id.match(/\d+$/)[0]).toggle('slow');
});

<强> Working Demo

使用一个函数进行多个ID jquery切换

4 个答案:

HTML

的jQuery