亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在單擊時選擇“此”?

如何在單擊時選擇“此”?

慕村9548890 2023-09-18 16:35:55
通過觸發 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>


查看完整回答
反對 回復 2023-09-18
?
紫衣仙女

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

  });

});


查看完整回答
反對 回復 2023-09-18
  • 1 回答
  • 0 關注
  • 156 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號