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

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

}

结果

当我从下拉菜单中 select 任何东西时，它一直显示 Group 4。我不确定为什么会这样。

我的优化方式是否正确？

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

任何帮助/提示/建议对我来说都是巨大的帮助。

Answer 1

不要为每个项目添加新的点击事件（当项目与您的模式不匹配时会发生什么 "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 2

我会摆脱 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 3

你有两个选择：

1° : 使用 select :

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

然后您将在 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 4

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

Iterate over objects.assignments, defining assignment as a variable within the current execution context. On each iteration, take the next enumerable property of object.assignments and give it to assignments.

例如，如果在 for 循环完成后您添加了 console.log(assignment)，您会发现它在 for loop: 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 5

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

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

这是一个使用 select 创建它的快速解决方案：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);
});

尽情享受！！

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

How do I properly handle any change actions to my dropdown-menu?

html

javascript

jquery

drop-down-menu

HTML

我曾经拥有的

我现在拥有的

结果