重写JS,删除jQuery.(美元)的麻烦

Rewriting JS, removing jQuery. $(this) trouble

本文关键字:美元 麻烦 jQuery JS 删除 重写      更新时间:2023-09-26

我正在尝试将此代码重写为香草JS。

$('body')
    // change background image
    .on('click', '.bgtexture .list li', function() {
        var self = $(this);
        $('.bgtexture .active').removeClass('active');
        self.addClass('active');
        $('.start').css('background', 'url("img/masks/'+self.text()+'.png") repeat');
    })
    // change background image
    .on('click', '.bggradient .list li', function() {
        var self = $(this),
            color = self.text();
        $('.bggradient .active').removeClass('active');
        self.addClass('active');
        $('.gradient').attr('class','gradient').addClass(color);
    });

我现在看到的是:

document.querySelector('.bgtexture .list li').addEventListener('click', function () {
    // what would $(this) be in vanilla js?
    var self = $(this);
});

$(this)在香草js中是什么?

试试这样做:

var elemList=document.querySelectorAll(".bgtexture .list li");
for(var i=0, len=elemList.length; i < len; i++)
{
        elemList[i].addEventListener('click', function()
        {
                //Clicked element
                console.log(this);
        }, false);
}