Javascript ES6代码优化

我正在尝试将当前的jQuery代码转换为用于滑块的ES6。 以下是当前jQuery代码：

$('.slider-nav a').click(function (event) {
        $('.slider-nav a').not($(this)).removeClass('current');
        $(this).addClass('current');
        $('.slider-content').not($(this).data('target')).removeClass('current');
        $($(this).data('target')).addClass('current');
        event.preventDefault();
    });

这是我更新的javascript代码

    let contentSlidersNavs = document.querySelectorAll('.slider-nav a');

    if (contentSlidersNavs.length) {
        for (let current_item of contentSlidersNavs) {
            current_item.addEventListener('click', function (event) {
                let target_element = event.target || event.srcElement;                
                for(let current_item of contentSlidersNavs){
                    if(current_item !== target_element){
                        current_item.classList.remove('current');
                    }
                }
                current_item.classList.add('current');
                let current_content_id = current_item.dataset.target;
                let slider_contents = document.querySelectorAll(`.slider-content:not(${current_content_id})`);
                for(let current_content of slider_contents){
                    current_content.classList.remove('current');
                }
                document.querySelector(`.slider-content${current_content_id}`).classList.add('current');
                event.preventDefault();
            });
        }
}

如您所见，我的新代码比以前的jQuery代码大三倍，看起来更复杂

例如，以下jQuery行：

 $('.slider-nav a').not($(this)).removeClass('current');

成为此ES6块：

let target_element = event.target || event.srcElement;                
            for(let current_item of contentSlidersNavs){
                if(current_item !== target_element){
                    current_item.classList.remove('current');
                }
            }

所以，我想问你的建议，有没有什么方法可以优化我的代码的性能，或者让代码更干净

这是玩的好地方

---

谢谢大家!

您正在看到jQuery之美的演示；更短、更精简的代码。代价是加载时间增加，性能稍慢

回答你的问题，不，没有任何方法可以优化你的“不”逻辑。不管你用哪种方式，你都需要一个循环

您可以将

：not

选择器与

queryselectoral（）

一起使用，但这取决于将

target\u元素

对象转换为有效的选择器字符串

几点提示：

• 您不需要将事件处理程序附加到每个锚点。将一个附加到父标记上，让事件冒泡，然后使用前面创建的

  target

  变量确定单击了哪个

• 您确实可以从ES6箭头功能中获益

• 使用

  NodeList

  s上的

  forEach

  方法。并完全放弃

  ：不要

  逻辑，因为您已经在调用

  .classList.add（'current'）

  ，稍后为您想要成为当前元素的元素添加（'current'）。（编辑：OP有很好的理由使用

  而不是
  ；它是必需的，因为否则动画会闪烁。）
  

• 您可能不是，所以只需使用

  event.target

  ，不要担心

  event.srcElement

• 从事件处理程序中提取尽可能多的DOM查询

编辑：您实际上可以将

.slider nav a

和

.slider content

组合到一个大DOM查询中，并一次从它们中删除

当前的

类

选项1：我不希望链接滚动到每个段落

let sliderNavsAndContents=document.queryselectoral（'.slidernav a，.slidercontent'）
document.querySelector（'.slider nav'）。addEventListener（'click'，event=>{
让target=document.querySelector（event.target.getAttribute（'data-target'））
sliderNavsAndContents.forEach（e=>
e、 类列表[e==event.target | | e==target？'add'：'remove']（'current'）
)
event.preventDefault（）
})

.current{
背景颜色：蓝色；
颜色：红色；
}

同侧前庭
虎口浮雕和肘部浮雕同侧前庭；Donec velit neque，拍卖人坐在amet aliquam vel，ullamcorper坐在amet ligula。前庭ac直径位于车辆部件的两侧

无蓄积门
这是一个自由的世仇。无门，无门，无门，无门。这是一个自由的世仇。我是波特提托·莱克图斯·尼布

寄托托托人维瓦姆斯
维瓦摩斯寄托着猫的身体。ipsum id或dapibus门的Pellentesque。维瓦摩斯寄托着猫的身体。莫里斯·布兰迪是一位杰出的艺术家，他是一位杰出的艺术家。第一同侧前庭
福西布斯·奥奇·卢克图斯和乌尔特里斯

如果的话，你可以做的一次（不合理的小）整理是最外面的

：如果你提供一个空的集合，一个
的循环是非常高兴的。啊，是的！。我的习惯是避免在不同的页面上出现空白集。谢谢你指出，我明白了。我还将考虑您的建议：不要使用querySelectorAll（）选择选择器。谢谢你，罗瑞！没问题，很乐意帮忙。这是一个完美的。不幸的是，我仍然必须坚持：不是逻辑，因为有一个动画可以将“当前”类添加到滑块内容中。因此，当我们单击同一导航时，由于删除和重新添加，它会一直闪烁。但是你的回答非常适合我问的问题。谢谢Gyre。我真的很感谢你的帮助：）我已经在第一个示例中添加了“not”逻辑。如果那样的话，请告诉我。