Javascript: indexOf($(this) 获取点击元素的数组索引值？

Question

我有一个带有按钮的数组:

var buttonnumber = ["#btn1", "#btn2", "#btn3", "#btn4", "#btn5"];

如果其中一个被点击，我想在数组中获取它们的索引值:

$("#btn1, #btn2, #btn3, #btn4, #btn5").click(function() {
var y = buttonnumber.indexOf(this); //($(this)) doesn't work either!
});

这行不通。 我改用 jQuery 方法 .index() :

var y = $(this).index();

但我宁愿不这样做，因为按钮在 html 中的顺序与数组中的顺序不同。

感谢您的帮助!

Answer 1

由于您的数组具有带散列的 ID，因此您需要使用散列搜索 ID，而不是元素本身。有两种解决方案:

让你的按钮数组引用对象而不是 ID

var buttonnumber = [$("#btn1"), $("#btn2"), $("#btn3"), $("#btn4"), $("#btn5")];

$("#btn1, #btn2, #btn3, #btn4, #btn5").click(function() {
    var y = buttonnumber.indexOf($(this));
});

或者对您正在点击的对象的 id 执行 indexOf:

var buttonnumber = ["#btn1", "#btn2", "#btn3", "#btn4", "#btn5"];

$("#btn1, #btn2, #btn3, #btn4, #btn5").click(function() {
    var y = buttonnumber.indexOf("#" + this.id);
});

您还可以将该点击选择器编写为:

var buttonnumber = ["#btn1", "#btn2", "#btn3", "#btn4", "#btn5"];

$(buttonnumber.join()).click(function() {
    var y = buttonnumber.indexOf("#" + this.id);
});

在现代浏览器中，你也不再需要 jQuery 来做这样的事情:

var buttonnumber = ["#btn1", "#btn2", "#btn3", "#btn4", "#btn5"];
// cast nodelist that's returned from querySelectorAll to array
Array.prototype.slice.call(document.querySelectorAll(buttonNumber.join()))
    .forEach(el => {
        el.addEventListener("click", (event) => {
            let y = buttonnumber.indexOf("#" + this.id);
        });
    })