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

buttonnumber.indexOf(this);

原来是

buttonnumber.indexOf('#' + this.id);

this对应DOM元素。需要获取该元素的id并获取基于它的索引。

Answer 2

由于您的数组具有带散列的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);
});

在现代浏览器中，你也不再需要像这样的东西：

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

Answer 3

使用$(this).attr('id')获取点击的项目ID属性，并从字符串中获取索引...

Answer 4

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

Javascript：indexOf（$（this）获取clicked元素的数组索引值？

4 个答案: