如何正确处理对下拉菜单的任何更改操作？

Question

我有一个下拉菜单，当我点击它们时，我想触发一些东西.我不确定是否应该使用.change或.click，也不确定这样的最佳实践是哪一种。

但现在我使用.click。

​

​

HTML

<div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span class="summary-texts">Summary</span>
    <ul class="dropdown">
       <!-- Dynamic List will added here  -->
   </ul>
</div>

我曾经拥有的

$('#group-0').click(function() {
  updateInfo("0");
  chart.draw( data[0] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 0 ');
});
$('#group-1').click(function() {
  updateInfo("1");
  chart.draw( data[1] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 1 ');
});
$('#group-2').click(function() {
  updateInfo("2");
  chart.draw( data[2] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 2 ');
});
$('#group-3').click(function() {
  updateInfo("3");
  chart.draw( data[3] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 3 ');
});
$('#group-4').click(function() {
  updateInfo("4");
  chart.draw( data[4] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 4 ');
});

它不像你所看到的那么好，很多硬代码值。所以我重构了我的代码。

我现在所拥有的

for (var assignment in objects.assignments ) {

$('#group-'+assignment).click(function() {
  updateInfo(assignment);
  chart.draw( data[assignment] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group '+assignment);
});

}

结果

当我从下拉菜单中选择任何内容时，它都会继续显示Group 4.我不知道为什么会这样。

我是不是用正确的方法优化了它？

如何处理下拉菜单中的任何更改操作？

任何帮助/暗示/建议对我都是很大的帮助。

Answer 1

让我们考虑一下您的代码当前正在做什么：

遍历objects.assignments，将assignment定义为当前执行上下文中的变量。在每次迭代中，使用object.assignments的下一个可枚举属性并将其交给assignments。

例如，如果在完成for循环之后，您添加了console.log(assignment)，您会发现它写入了for循环中给assignment的最后一个值: 4。为什么？因为变量assignment不限于for循环。For循环不创建自己的作用域。

因此，当调用任何单击处理程序时，它们将访问给assignment的最后一个值，即4。

我们可以通过使用jQuery的each()函数来避免这个问题，因为函数确实创建了自己的作用域。

$.each(objects.assignments, function(index, value) {
    $('#group-' + index).click(function() {
        updateInfo(index);
        chart.draw(data[index] , options);
        $("#dd.wrapper-dropdown-1 .summary-texts").text('Group ' + index);
    });
});

Answer 2

我会去掉for循环，只使用jquery。选择器中的^=侦听以group-开头的in。要获得实际的组号，您需要删除group-，否则分配将类似于group-2，而不仅仅是2。

$('#dropdown li').on('click',function(){
  var assignment=$(this).attr('id').replace('group-','');
  updateInfo(assignment);
  chart.draw( data[assignment] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group '+assignment);
});

Answer 3

而不是为每个项目添加一个新的单击事件(当一个项目与您的模式“group-x”不匹配时会发生什么？)在"ul“元素上添加一个单击事件，如果有必要，对每个"li”元素添加一个单击事件，并使用DOM元素的"innerText“或"textProperty”属性获取文本。

下面是一些示例：

get the text in a list item and modify it with javascript

How to get Value / Text of a List item Javascript

我会亲自尝试将click事件设置得尽可能高，以使页面上的代码保持干净，并降低加载时间。