此关键字位于setTimeout函数内部，该函数嵌套在on（）方法下。它不起作用

Question

$("ul").on("click", ".start", function() { 
    console.log("started"); 
    var timeInput = $(this).parent().children('.time'); 
    var timeInputValue = timeInput.val(); 
    var milliSeconds = Number(timeInputValue)*60*1000; 
    console.log(milliSeconds); 
    setTimeout(function(){ 
     alert("Time Over"); 
     $(this).parent().children('.task').toggleClass("completed"); 
    } 
     , milliSeconds); 
}) 

........................................ ............................

<ul> 
     <li><span class="delete">X</span> <span class="start">S</span> <span class="task">Code ToDo</span></li> 
     <li><span class="delete">X</span> <span class="start">S</span> <span class="task">Read two books</span></li> 
     <li><span class="delete">X</span> <span class="start">S</span> <span class="task">Run</span></li>  
    </ul> 

我知道我现在用的是this关键字错误的setTimeout函数里面，但我想访问与start相关的类.task的元素。

我该怎么做？

警报方法正在工作，但toggleClass不起作用。

Answer 1

你可以使用arrow function要做到这一点，

setTimeout(() => { 
    alert("Time Over"); 
    $(this).parent().children('.task').toggleClass("completed"); 
}, milliSeconds); 

如果您在ES5编写代码然后使用setTimeout的第三个参数，

setTimeout(function(_this){ 
    alert("Time Over"); 
    $(_this).parent().children('.task').toggleClass("completed"); 
}, milliSeconds, this);