Question

我有一些jQuery代码，我试图了解如何将其转换为vanilla JS，并使其可以在多个元素上重用。

我读过Equivalent of $(this) in native javascript，我真的不知道从哪里开始。有人可以帮助我吗？

jQuery代码：

$(".icon").click(function(){
  $(this).toggleClass('active');
  $('.cap').addClass('active');
  $(this).one(transitionEvent, function(event) {
    // Do something here
    $('.cap').removeClass('active')
  });
});

特定于此HTML代码：

        <div class="icon">
          <i></i>
          <span class="cap"></span>
        </div>

我知道我必须按照这个特定的顺序执行以下操作：

// 1 find the .icon and bind the .click (done) 
// 2 toggle active the .icon (done) 
// 3 add class .active to the .cap class  
// 4 convert .one into JS equivalent 
// 5 now remove the .active from the .cap class

JS正在进行中

    // 1 find the .icon and bind the .click
var myfunct = document.querySelector(".icon");
myfunct.addEventListener("click", function(e) {
    // 2 toggle active the .icon
    el.classList.toggle('active')
        // now how can I proceed? for #3 in my list?
});

Answer 1

我建议您查看此页http://youmightnotneedjquery.com/

有很多关于如何将jQuery代码的特定部分重写为vanilla JS的示例。

您的代码段的一些示例：

$(".icon") =＆gt; document.querySelectorAll('.icon')

$(this).toggleClass('active'); =＆gt; el.classList.toggle('active')

以下是将click事件绑定到所有.icon元素的方法：

var icons = document.querySelectorAll('.icon');

icons.forEach(function (el) {
    el.addEventListener('click', function () {
        el.classList.toggle('active');
        // ...
    })
})

$.one只是一次绑定，它等于与addEventListener绑定，并且在监听器内调用removeEventListener来删除它（因此不能第二次调用它）。 / p>

var handler = function () {
    // Do something here

    el.removeEventListener(eventName, handler); // here we remove the handler
};
el.addEventListener(eventName, handler);

所以它将是这样的：

var icons = document.querySelectorAll('.icon');

icons.forEach(function (el) {
    el.addEventListener('click', function () {
        el.classList.toggle('active');
        var cap = el.querySelector('.cap');
        cap.classList.add('active');

        var handler = function () {
            // Do something here
            cap.classList.remove('active');
            el.removeEventListener(transitionEvent, handler);
        };
        el.addEventListener(transitionEvent, handler);
    })
});

jQuery $（this），。onclick函数和自定义函数的本机javascript

1 个答案: