Question

我正在尝试将此代码重写为vanilla 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);

});

$（这）在香草js中会是什么？

Answer 1

以这种方式尝试：

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

重写JS，删除jQuery。 $（这）麻烦

1 个答案: