时间戳

首页 > 解决方案 > 在循环中将不同的变量值传递给事件处理程序

javascript - 在循环中将不同的变量值传递给事件处理程序

问题描述

伙计们，我只是一个初学者，我不完全确定如何回答我的问题。我正在做一个小插件，它会重新设计所有 HTML输入的样式。我遇到的问题是，当涉及到每页的多个下拉实例时，无论在哪个 <\select> 上单击，我都只单击最后一个 <\select> 做出反应（显示下拉菜单）。

$(function () { // Document ready 
    test(document.getElementsByClassName("js_select"));
});


function test(selects) {
    var i = 0
    var l = selects.length;

    for (i; i < l; i++) {
        var thisSelect = selects[i];
        var xVariable = i * 10;

        $(thisSelect).click(function () {
            onDivClick.apply(this, [xVariable]);
        });
    }
    function onDivClick(variable) {
        console.log(variable);
    }
}

所以在这里，我做了一个小例子来复制我的代码并展示发生了什么。我确实明白，随着循环的每次迭代，“xVariable”的值都会发生变化，并且每个“选择”的点击事件只会拾取“xVariable”的最后一个值。

如何对此进行调整，以便当我单击第一个时，我在控制台中得到“0”，下一个选择打印“10”，依此类推......？

有没有办法在没有对象符号的情况下解决这个问题？

谢谢你

标签： javascriptjqueryonclickclickapply

解决方案

each您可以使用和绑定click事件来遍历选择，如下所示：

(function () {
	$(".js_select").each(function(idx) {
  	$(this).on("click", function() {
    	console.log(idx * 10);
    });
  });
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="" class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>
<br>
<select name="" id="" class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>
<br>
<select name="" id="" class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>

我添加了一个示例选择列表，以便更容易理解它是如何工作的。

推荐阅读