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

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

我会摆脱 for 循环，只使用 jquery。选择器中的^= 监听以group- 开头的id。要获得实际的组号，您需要删除 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 2

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

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

我个人会尝试将点击事件设置得尽可能高，以保持页面上的代码干净并降低加载时​​间。

Answer 4

你有两个选择：

1°：使用选择：

<select>
    <option value='v'>text</option>
    ...
</select>

然后您将在选择上添加一个更改侦听器。

2°：按照你的方式去做（它可能是样式问题的一个不错的选择），但稍微调整一下。首先，正确附加您的选项，如下所示：

[ {
  "text": "Group 0",
  "value": 1
}, {
  "text": "Group 1",
  "value": 2
}, {
  "text": "Group 2",
  "value": 3
}, {
  "text": "Group 3",
  "value": 4
} ].forEach( function( el ) {
  $( "#dropdown" ).append( "<li data-info=\" + el.value + "\">" + el.text + "</li>" )
} );

然后，您应该使用事件委托。在 ul 上添加点击事件。这确实是更好的性能明智，它将允许您在事件附件之后附加选项。

$("#dropdown").on( "click", "li", function( e ) {
  console.log( $( e.target ).data( "info" ) )
  updateInfo( $( e.target ).data( "info" ) );
  chart.draw( data[ $( e.target ).data( "info" ) ] , options);
} );

我给你做了一个 js bin 来玩它：https://jsbin.com/posuzeyija/edit?html,js,console,output

Answer 5

'select' 元素不是比拥有'ul' 并使用 CSS 使其作为下拉菜单更好吗？

无论如何，“.change”和“.click”是不同的东西。第一个将在更改项目时起作用，因此如果单击与之前选择的相同的项目，则不会执行任何操作。后者将在您每次单击 any 元素时运行代码，无论之前选择了什么。您需要考虑您想要或需要哪一个。

这是一个使用选择创建它的快速解决方案：http://jsfiddle.net/sf3buwbq/

$('#select').change(function() {
   $(this).find("option:selected");
});

我不确定您是否了解这可以实现，并且您可以将所需的所有信息存储在

<option> </option>

Answer 6

让我修改你的代码。 html 可能如下所示。

<ul class="dropdown">
       <li class="groups" id="group-1">
       <li class="groups" id="group-2">
   </ul>

然后摆脱分配循环

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

享受！！