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

【问题标题】：Passing different variable values to event handlers in a loop在循环中将不同的变量值传递给事件处理程序
【发布时间】：2023-03-27 19:59:01
【问题描述】：

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

$(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" 的最后一个值em>。

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

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

谢谢

【问题讨论】：

标签： javascript jquery onclick click apply

【解决方案1】：

您可以使用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>

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

【讨论】：

【解决方案2】：

或者没有大而丑陋的 jQuery

// You could also use querySelectorAll
let selects = document.getElementsByClassName('js_select');

// Make sure there are selects
if(selects) {
  for(let i = 0; i < selects.length; i++) {
    let select = selects[i];
    
    select.addEventListener('click', function() {
      console.log(i * 10);
    });
  }
}

<select class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>
<br>
<select class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>
<br>
<select class="js_select">
  <option value="">-- Select a Value --</option>
  <option value="0">test</option>
</select>

【讨论】：