javascript - jQuery $(this)、.onclick 函数和用于自定义函数的 native javascript

Question

我有一小段 jQuery 代码，我试图了解如何将其转换为普通 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 代码的特定部分重写为普通 JS 的示例。

代码片段的一些示例:

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

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

以下是将 click 事件绑定(bind)到所有 .icon 元素的方法:

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

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

$.one 只是一次绑定(bind)，它相当于与 addEventListener 绑定(bind)，并在监听器内调用 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);
    })
});