如何在Javascript中将180行代码减少到20行？

我有很多单击处理程序函数，它们几乎（在文本和功能上）相同。我有一份菜单，里面大概有10道菜；当我单击一个项目时，单击处理程序只会使一个

div

可见，另一个9

div

隐藏。维护这一点很困难，我只知道必须有一种聪明和/或不可理解的方法来减少代码膨胀。你知道怎么做吗？jQuery还可以。目前的代码是：

 // repeat this function 10 times, once for each menu item
 $(function() {
   $('#menuItem0').click(function(e) {
     // set 9 divs hidden, 1 visble
     setItem1DivVisible(false);
     // ...repeat for 2 through 9, and then
     setItem0DivVisible(true);
   });
 });

 // repeat this function 10 times, once for each div
 function setItem0DivVisible(on) {
   var ele = document.getElementById("Item0Div");
   ele.style.display = on? "block" : "none";
 }

试一试

功能添加点击（i）{
$（'#menuItem'+i）。单击（函数（e）{
//设置9个div隐藏，1个visble
对于（var j=0；j<10；++j）{
var ele=document.getElementById（“项”+j+“Div”）；
ele.style.display=（i==j？“块”：“无”）；
}
});
}

试试看

功能添加点击（i）{
$（'#menuItem'+i）。单击（函数（e）{
//设置9个div隐藏，1个visble
对于（var j=0；j<10；++j）{
var ele=document.getElementById（“项”+j+“Div”）；
ele.style.display=（i==j？“块”：“无”）；
}
});
}

显然，如果改用类，这将更符合逻辑：

。。。
...
...

$（'.menuItem'）。在（'click'，function（）上{
var rel=$（this）.data（'rel'）；//获取相关的ItemDiv ID
$（'.ItemDiv'）.hide（）；//隐藏所有ItemDiv元素
$（“#”+rel.show（）；//显示与单击的元素相关的ItemDiv
});

显然，如果改用类，这将更符合逻辑：

。。。
...
...

$（'.menuItem'）。在（'click'，function（）上{
var rel=$（this）.data（'rel'）；//获取相关的ItemDiv ID
$（'.ItemDiv'）.hide（）；//隐藏所有ItemDiv元素
$（“#”+rel.show（）；//显示与单击的元素相关的ItemDiv
});

创建10个div，其中包含一个用于标记的类

<div id="id1" class="Testing">....</div>
<div id="id2" class="Testing">....</div>
<div id="id3" class="Testing">....</div>

---

创建10个div，其中包含一个用于标记的类

<div id="id1" class="Testing">....</div>
<div id="id2" class="Testing">....</div>
<div id="id3" class="Testing">....</div>

使用它可以让一切变得简单。将其用于具有适当ID的菜单项。这在代码中不使用任何

for

循环或额外的类/标记。即使您添加了更多的

div

s，它也会起作用

使用它可以让一切变得简单。将其用于具有适当ID的菜单项。这在代码中不使用任何

for

循环或额外的类/标记。即使您添加了更多的

div

s，它也会起作用

---

将相关Id保存在数组中-

[“Item0Div”、“Item1Div”、…]

创建常规setItemDivVisible方法：

function setItemDivVisible(visible, id) {
   var ele = document.getElementById(id);
   ele.style.display = visible ? "block" : "none";
}

并将单击处理程序方法设置为：

function(e) {
   var arrayLength = myStringArray.length;
   for (var i = 0; i < idsArray.length; i++) {
      setItemDivVisible(idsArray[i] === this.id, idsArray[i]);
   }
}

函数（e）{
var arrayLength=myStringArray.length；
对于（变量i=0；i

---

我认为这样做可以将相关Id保存在一个数组中-

[“Item0Div”、“Item1Div”，…]

创建常规setItemDivVisible方法：

function setItemDivVisible(visible, id) {
   var ele = document.getElementById(id);
   ele.style.display = visible ? "block" : "none";
}

并将单击处理程序方法设置为：

function(e) {
   var arrayLength = myStringArray.length;
   for (var i = 0; i < idsArray.length; i++) {
      setItemDivVisible(idsArray[i] === this.id, idsArray[i]);
   }
}

函数（e）{
var arrayLength=myStringArray.length；
对于（变量i=0；i

我想这会起作用的

小提琴-

如果没有html示例，很难知道。假设无法从

menuItem

遍历到

ItemDiv

——可以使用

.index

和

.eq

根据元素与选择器匹配的顺序匹配元素

var $menuItems = $("#menuItem0, #menuItem1, #menuItem2, ...");
var $divs      = $("#Item0Div, #Item1Div, #Item2Div, ...");

$menuItems.click(function(){
  var idx = $(this).index();

  // hide all the divs
  $divs.hide()

  // show the one matching the index
  .eq(idx).show();
})

小提琴-

如果没有html示例，很难知道。假设无法从

menuItem

遍历到

ItemDiv

——可以使用

.index

和

.eq

根据元素与选择器匹配的顺序匹配元素

var $menuItems = $("#menuItem0, #menuItem1, #menuItem2, ...");
var $divs      = $("#Item0Div, #Item1Div, #Item2Div, ...");

$menuItems.click(function(){
  var idx = $(this).index();

  // hide all the divs
  $divs.hide()

  // show the one matching the index
  .eq(idx).show();
})

---

如果您想让我们编写更好的查询选择器，请提供一把小提琴！与班级一起工作。向单击的元素添加一个

active

，并将相应的样式放入css中。这样你只需要一个点击处理程序。也许最好在CodeReview上发布完整的代码。感谢所有的输入-乍一看，所有6个（当前）答案似乎都有效，但我只详细介绍了其中的3个。我接受的那个不是最简洁的，需要知道菜单项的数量，但它很简单。如果你想让我们编写更好的查询选择器，请提供一个提琴！与班级一起工作。向单击的元素添加一个

active

，并将相应的样式放入css中。这样你只需要一个点击处理程序。也许最好在CodeReview上发布完整的代码。感谢所有的输入-乍一看，所有6个（当前）答案似乎都有效，但我只详细介绍了其中的3个。我接受的那个不是最简洁的，需要知道菜单项的数量，但它很简单。我会选择这个简单的解决方案，但使用“单击”而不是“每个”。我不确定是谁对此投了赞成票，但这个答案完全错了。所有这些都将循环通过每个

。测试
元素并给它一个块显示。在下一次迭代中，它将隐藏刚刚显示的元素，这意味着最终元素将始终显示。@JamesDonnelly抱歉，我将进行编辑，我忘记附加单击事件：）我会选择这个简单的解决方案，但使用了“单击”而不是“每个”。我不确定是谁对此进行了投票，但这个答案完全错误。所有这些都将循环通过每个
。测试
元素并给它一个块显示。在下一次迭代中，它将隐藏刚刚显示的元素，这意味着最终元素将始终显示。@JamesDonnelly抱歉，我将进行编辑，我忘记附加单击事件：）