純 JavaScript 相當於 JQuery $(this)

Question

我在下面給出一個簡單的 jQuery 代碼示例：

$(".black").on("click", function() {
    $(this).css("color", "red");
});

單擊帶有“黑色”css class 的元素時，特定元素的（此）顏色變為紅色。

現在，如何用純 JavaScript 編寫上面的代碼？ 當它用於 class 選擇器時，請告訴我 JavaScript 相當於 Jquery $(this) 。

Answer 1

var blacks = document.getElementsByClassName('black');

for(var i =0; i< blacks.length; i++){
    blacks[i].onclick = function(){ 
        this.style.color = 'red';
    }
}

  var blacks = document.getElementsByClassName('black'); for(var i =0; i< blacks.length; i++){ blacks[i].onclick = function(){ this.style.color = 'red'; } } 

 <div class="black">test</div> <div class="black">test</div> <div class="black">test</div> 

Answer 2

沒有$(this)純javascript等效項，因為$()返回jQuery對象。...相反，您必須使用純javascript構造來完成類似的操作

function handler() {
    this.style.color = 'red';
}

var els = document.getElementsByClassName('');
for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('click', handler, false)
}

 function handler() { this.style.color = 'red'; } var els = document.getElementsByClassName('black'); for (var i = 0; i < els.length; i++) { els[i].addEventListener('click', handler, false) } 

 <div class="black">1</div> <div class="black">2</div> <div class="black">3</div> <div class="black">4</div> <div class="black">5</div> 

Answer 3

您可以像這樣設置css屬性：

this.style.color = "red";

Answer 4

較短的版本

[].forEach.call(document.querySelectorAll('.black'), function(el) {
    el.addEventListener('click', function() {
        el.style.color="red";
    })
})