Question

我将在下面给出一个简单的jQuery代码示例：

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

单击带有“黑色”css类的元素时，特定元素的（此）颜色将变为红色。

现在，上述代码如何用纯JavaScript编写？当它用于类选择器时，请告诉我Jquery $（this）的JavaScript等价物。

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";
    })
})

纯JavaScript相当于JQuery $（this）

4 个答案: