从 Jquery 重构时如何优化原生 JavaScript 代码

Question

我需要将一些 Jquery 重写为本机 JavaScript 代码，但我遇到了一个我不太确定如何解决的问题。

这是我需要用原生 JS 重写的 Jquery 代码：

$('.class1').click(function () {
  setTimeout(() => {
    $('.class2').css('top', '252px');
    $('.class3').css('bottom', '0px');
  }, 200);
  $('.class2').css('z-index', '-1');
  $('.class1').css('z-index', '-1');
}); 

这是我用原生 JavaScrip 写的：

if (document.querySelector('.class1')){
document.querySelector('.class1').addEventListener('click', function () {
    setTimeout(() => {
        if (document.querySelector('.class2')) {
            document.querySelector('.class2').style.top = '252px';
        }
        if ( document.querySelector('.class3')) {
            document.querySelector('.class3').style.bottom = '0px';
        }
    }, 200);
    if (document.querySelector('.class2')) {
        document.querySelector('.class2').style.zIndex = '-1';
    }
    if ( document.querySelector('.class1')) {
        document.querySelector('.class1').style.zIndex = '-1';
    }
})
}

我希望人们可以向我解释如何解决两件事：

1. 如果代码在整个站点上运行，是否有更优雅的方法来检查当前页面上的元素？
   
2. 还有什么可以替代函数中的 if 语句的吗？
   在 Jquery 中，这些语句是一个接一个地执行的，但在我的情况下，我需要先检查一个元素，如果它存在，则对其进行处理。

Answer 1

您可以通过将querySelector 的结果存储在变量中来使代码更简洁。另请注意，jQuery 中的类选择器可以返回多个元素，因此它的原生等价物是 querySelectorAll()。

因此，您需要遍历该集合中的所有元素，并根据需要添加事件处理程序或更新其样式。由于这个循环，您不需要显式检查元素是否存在，因为如果集合为空，forEach() 将不会执行。

话虽如此，试试这个：

let class1 = document.querySelectorAll('.class1');
let class2 = document.querySelectorAll('.class2');
let class3 = document.querySelectorAll('.class3');

class1.forEach(el => {
  el.addEventListener('click', e => {
    setTimeout(() => {
      class2.forEach(el => el.style.top = '252px');
      class3.forEach(el => el.style.top = '0px');
    }, 200);
    
    class1.forEach(el => el.style.zIndex = -1);
    class2.forEach(el => el.style.zIndex = -1);
  });
});