Question

我有一个小的jQuery代码，用于处理一些toggle类和HTML5本地存储，我想将它转换为现代的vanilla JS代码。我不得不说我不知道从哪里开始。

有人可以通过任何机会向我展示一个现代JS代码的正确方法吗？我真的很感激。

示例演示： http://jsbin.com/wimojapowo/1/edit?html,css,js,output

$('#container').toggleClass(localStorage.toggled);

$('.bar-toggle').on('click', function() {
  //localstorage values are always strings (no booleans)  
  if (localStorage.toggled != "with_toggle") {
    $('#container').toggleClass("with_toggle", true);
    localStorage.toggled = "with_toggle";
  } else {
    $('#container').toggleClass("with_toggle", false);
    localStorage.toggled = "";
  }
});

Answer 1

首先请注意，您的jQuery示例比它需要的更复杂。你可以这样做：

$('.bar-toggle').on('click', function() {
  $('#container').toggleClass("with_toggle", localStorage.toggled != "with_toggle");
  localStorage.toggled = localStorage.toggled == "with_toggle" ? '' : 'with_toggle';
});

要将此转换为普通JS，您可以使用classList.toggle()方法：

document.querySelectorAll('.bar-toggle').forEach(function(el) {
  el.addEventListener('click', function() {
    this.classList.toggle("with_toggle", localStorage.toggled != "with_toggle");
    localStorage.toggled = localStorage.toggled == "with_toggle" ? '' : 'with_toggle';
  });
})

classList MDN

的更多信息

如何将jQuery ToggleClass和if / else代码重写为vanilla JS？

1 个答案: