1 回答

TA貢獻1891條經驗 獲得超3個贊
原因是函數內部this
引用了全局Window對象。
您必須傳遞this
給該函數,以便您可以在函數內部引用該函數:
.active{
? color:green;
? font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1" onClick="TestFunction(this);">Click</div>
<script>
function TestFunction(el) {
? console.log(this.constructor.name) //Window
? $(el).addClass('active');
}
</script>
盡管最好避免內聯事件處理程序:
$('.class1').click(function(){
? $(this).addClass('active');
});
.active{
? color:green;
? font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">Click</div>

TA貢獻1839條經驗 獲得超15個贊
使用內聯處理程序時,調用的函數在元素的范圍內運行window,而不是在引發事件的元素范圍內運行。要解決這個問題,您可以this作為參數傳遞:
<div class="class1" onClick="TestFunction(this);">Click</div>
function TestFunction(el) {
el.addClass('active');
}
然而,這不是一個好的做法。內聯事件屬性已經過時,現在被認為是不好的做法。實現此目的的更好方法是附加不顯眼的事件處理程序。在普通的 JS 中,它看起來像這樣:
<div class="class1">Click</div>
document.querySelectorAll('.class1').forEach(el => {
el.addEventListener('click', function() {
this.classList.add('active');
});
});
在 jQuery 中,它看起來像這樣:
<div class="class1">Click</div>
jQuery($ => {
$('.class1').on('click', function() {
$(this).addClass('active');
});
});
- 1 回答
- 0 關注
- 156 瀏覽
添加回答
舉報