如何使用递增的变量名运行相同的javascript

我有下面的代码，我知道这是超级低效的，虽然我不知道如何使它更简单。是否有一种方法可以将button1更改为buttonX，并且所有内容只需编写一次

如果以前有人问过，我会道歉。我尝试过搜索，但这是一个相当复杂的事情来描述，我没有找到任何相关的

var button1 = document.getElementById('toggle1');
var button2 = document.getElementById('toggle2');
var button3 = document.getElementById('toggle3');
var button4 = document.getElementById('toggle4');
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');

button1.onclick = function() {
        div1.style.display = 'block';
        div2.style.display = 'none';
        div3.style.display = 'none';
        div4.style.display = 'none';
};

button2.onclick = function() {
        div1.style.display = 'none';
        div2.style.display = 'block';
        div3.style.display = 'none';
        div4.style.display = 'none';
};

button3.onclick = function() {
        div1.style.display = 'none';
        div2.style.display = 'none';
        div3.style.display = 'block';
        div4.style.display = 'none';
};

button4.onclick = function() {
        div1.style.display = 'none';
        div2.style.display = 'none';
        div3.style.display = 'none';
        div4.style.display = 'block';
};

---

试试这个-我以你的代码为例，因为你没有发布HTML

这两个示例的优点是，当您需要添加按钮和div时，代码根本不会更改

const buttons=document.queryselectoral（“[id^toggle]”）；
for（设i=0；i

您可以使用类和数据属性，而不是ID选择器和替换

const buttons=document.queryselectoral（“.toggleButton”）；
for（设i=0；i

---

假设

Div1

您当然可以使用javascript对象

// let's match keys (1, 2, 3, 4) to buttons
var buttons = {
  1: document.getElementById('toggle1'),
  2: document.getElementById('toggle2'),
  3: document.getElementById('toggle3'),
  4: document.getElementById('toggle4')
}
// let's match keys (1, 2, 3, 4) to divs
var divs = {
  1: document.getElementById('div1'),
  2: document.getElementById('div2'),
  3: document.getElementById('div3'),
  4: document.getElementById('div4')
}

// this function will hide all divs except the once given as a param
function hideAllBut(index) {
  // go through each div
  for (var i = 1; i <= 4; i++) {
    // if i is equal to the param, display the div
    if (i === index) {
      divs[i].style.display = 'block'; // accessing the divs object which has key i
    } else {
      // else hide it
      divs[i].style.display = 'none';
    }
  }
}

// now for each button, we call the function to hide all expect the one we want
buttons[1].onclick = function () {
  hideAllBut(1);
};

buttons[2].onclick = function () {
  hideAllBut(2);
};

buttons[3].onclick = function () {
  hideAllBut(3);
};

buttons[4].onclick = function () {
  hideAllBut(4);
};

//让我们将键（1、2、3、4）与按钮匹配
变量按钮={
1:document.getElementById（'toggle1'），
2:document.getElementById（'toggle2'），
3:document.getElementById（'toggle3'），
4:document.getElementById（'toggle4'）
}
//让我们将键（1、2、3、4）与div匹配
var divs={
1:document.getElementById（'div1'），
2:document.getElementById（'div2'），
3:document.getElementById（'div3'），
4:document.getElementById（'div4'）
}
//此函数将隐藏除一度作为参数给定的div之外的所有div
函数HIDEALBUT（索引）{
//检查每个分区
对于（var i=1；i请考虑将所有内容放入一个数组中，以便可以按索引进行操作


var按钮=[]；
var divs=[]；
for（设i=0；i<4；i++）{
按钮[i]=document.getElementById（'toggle'+（i+1））；
divs[i]=document.getElementById（'div'+（i+1））；
按钮[i]。添加事件列表器（'click'，doClick（i））；
}
函数doClick（索引）{
返回函数（）{
for（设i=0；i<4；i++）{
divs[i].style.display=i==索引？'block'：'none'；
}
};
}
doClick（0）（；
1
两个
三
四
1.
2.
3.
4
使用，您可以执行以下操作：


$（'.toggleButton'）。在（'click'，function（）上{
var toggleDivId='#toggleDiv'+$（this.attr（'id'）.replace（'toggleButton'，''）；
$（'.toggleDiv'）.css（'display'，'none'）；
$（toggleDivId）.css（'display'，'block'）；
})；

按钮1
按钮2
按钮3
按钮4
第一组
第2组
第3组
div4
下面是一个使用jQuery的示例，它有助于避免必须首先声明每个按钮的所有变量

我还添加了一个“重置”按钮，以便您可以取回所有div。我不确定这是否是您想要的，但对我来说，这似乎是jQuery特别有帮助的事情，因此下面是一个示例：


$（'button'）。在（'click'，function（）上{
$（'.boxdiv'）.css（{“display”：“none”}）；
开关（$（this.attr（'id'））{
案例“1”：
案例“2”：
案例“3”：
案例“4”：
$（`div${$（this.attr（'id'）}'））.css（{“display”：“block”}）；
打破
案例“重置”：
$（'.boxdiv'）.css（{“display”：“block”}）；
打破
}    
})；

地下一层
地下二层
地下三层
B4
重置




您也可以发布HTML吗？您的问题的答案是肯定的。您应该编写一个函数作为所有按钮的点击处理程序。这样，您只需要编写一次重复代码。您想要的是如何创建函数。请将您的代码建议放入答案中。这不是很一般定义您的意思
generic
。此代码在任何情况下都可以正常工作，只需稍作更改。您认为有什么问题吗？对于其中一个，如果添加新按钮，您将不得不更改4到5次。而使用现有的HTMLElement数组，这是非常不通用的。为什么他必须为每个新按钮和div向您的对象添加一个新条目？我将再次说明必须记住在totalElements中更改4到5。为什么不直接计算页面上的元素？这不是问题所问的吗？
是否有一种方法可以将button1更改为buttonX，所有内容只需编写一次？
添加一个按钮和一个div，您就必须更改数字。我更愿意给出一个解决方案at总是在工作，而不是只给OP他所要求的。但是，他们没有按钮5来点击这个按钮有什么不好？他们要求一个解决方案，以避免手动写入1-4，而不是每个按钮。但我可能误解了实际目的。这个问题没有用jQuery标记，所以jQuery请求没有意义。只是一个alt所以它是有意义的。正确的工具用于正确的工作。也请使用。切换（布尔值）而不是。css@mplungjan：我可以这样做，但因为我不知道div的初始状态（OP没有发布HTML）我真的不能。@mplungjan:我同意。但是所有这些都假设了OP没有提供的某些条件。谢谢，关于数据属性和类的好主意。纯JS非常好而且高效。
var buttons = {};
var divs = {};
// how many elements we have (here 4)
var totalElements = 4;
// assign buttons and divs values dynamically, while adding the onclick
for (var i = 1; i <= totalElements; i++) {
  buttons[i] = document.getElementById('toggle' + i); // i.e. if i=1, 'toggle'+i = 'toggle1'
  divs[i] = document.getElementById('div' + i);
  buttons[i].onclick = function () {
    hideAllBut(i);
  };
}

// this function does the same as how we wrote it perviously but with a different format
function hideAllBut(index) {
  for (var i = 1; i <= totalElements; i++) {
    // we use the ternary operator
    divs[i].style.display = (i === index) ? 'block' : 'none';
  }
}