通過觸發 onClick 事件，我想選擇 onClick 事件附加到的同一元素，以向該同一元素添加一個類。我嘗試的是以下內容：<div class="class1" onClick="TestFunction();">Click</div><script> function TestFunction() { $(this).addClass('active'); }</script>單擊 div 后，應將“active”類添加到同一元素，從而導致......<div class="class1 active" onClick="TestFunction();">Click</div>然而這不起作用。我想知道this在這種情況下選擇器的工作方式是否有所不同。div 元素的結構應保持相同，并且函數應保持在 onClick 屬性上的相同位置。
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 瀏覽
添加回答
舉報
0/150
提交
取消