jQuery $(this)， .onclick 函数和用于自定义函数的原生 javascript

Question

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

我在原生 JavaScript 中阅读了相当于 $（this）的内容，但我真的不知道从哪里开始。有人可以帮我吗？

j查询代码：

$(".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代码的特定部分重写为普通JS。

代码片段的一些示例：

$(".icon") => document.querySelectorAll('.icon')

$(this).toggleClass('active'); => 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将其删除（因此不能第二次调用）。

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