Question

我循环浏览页面上的列表元素数组，并将click事件附加到每个元素。当我记录点击的元素时，我可以看到它的工作原理。

    var loop = function() {
        for (var i = 0; i < optionsList.length; i++) {
            optionsList[i].addEventListener("click", optionClicked);
        }
    }

    var optionClicked = function() {
        console.log(this)
    }

有没有办法可以将索引从循环传递给optionClicked函数？我想做这样的事情：

    var optionClicked = function() {
        console.log("You clicked number: " i)
    }

更新向已经回答的人致歉，上面的代码是一个简化的例子。解决方案没有奏效。这是我的实际代码。我认为使用this会导致错误Uncaught TypeError: Cannot read property 'className' of undefined

var optionsListener = function() {
    for (var i = 0; i < optionsDomList.length; i++) {
        optionsDomList[i].addEventListener('click', optionClicked(i));
    }
}

var optionClicked = function(i) {
    if (currentQuestionAnswered === false) {
        this.className += "option-highlight";
        currentQuestionAnswered = true;
    }
    var correctAnswerNo = allQuestions[step].correctAnswer;
    console.log(this + i)
}

Answer 1

您可以bind函数的i值，然后将其用作参数。

使用分配给变量的匿名函数时要小心。它们不像标准功能那样悬挂。

var loop = function() {
    for (var i = 0; i < optionsList.length; i++) {
        optionsList[i].addEventListener('click', optionClicked.bind(null, i));
    }
}

var optionClicked = function(event, i) {
    console.log('You have clicked: ' + i);
}

Answer 2

这是使用闭包的一种方法：

      dataArray = try! Realm().objects(Book.self)
        .sorted( by: [SortDescriptor(keyPath: "Author", ascending: true), SortDescriptor(keyPath: "Title", ascending: true)] )

Answer 3

将索引值设置为当前选项元素

＆＃13;

function loop () {
    for (var i = 0; i < optionsList.length; i++) {
        optionsList[i].index = i;
        optionsList[i].addEventListener('click', optionClicked);
    }
}

function optionClicked(event) {
    console.log('You clicked number:', event.target.index);
}

// Example usage
var optionsList = document.querySelectorAll('li');
loop();

＆＃13;

<ul>
    <li>Option item 1</li>
    <li>Option item 2</li>
    <li>Option item 3</li>
    <li>Option item 4</li>
    <li>Option item 5</li>
</ul>

＆＃13;

将循环中的索引传递给循环中每个元素的click函数？

3 个答案: