我正在尝试将当前的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');
}
}
所以，我想问你的建议，有什么方法可以在性能方面优化我的代码或使代码更清洁？
以下是jsfiddle link。
谢谢！
答案 0 :(得分：4)
您正在观看jQuery之美的演示;更短，更精简的代码。罚款是增加的加载时间和稍慢的性能。
要回答你的问题，不，没有任何方法可以优化＆＃39;不是＆＃39;你有逻辑。无论你采用哪种方式，你都需要一个循环。
您可以将:not选择器与querySelectorAll()一起使用，但这取决于将target_element对象转换为有效的选择器字符串。
答案 1 :(得分：3)
一些指示：
您不需要将事件处理程序附加到每个锚点。将一个附加到父标记，让事件冒出来，然后使用您之前创建的target变量来确定单击哪个变量。
您可以从ES6箭头功能中受益。
在forEach上使用NodeList方法。 并完全放弃（编辑：OP有充分的理由使用:not逻辑，因为您之后已经为了想要当前的元素调用.classList.add('current')。not 1}};由于动画会闪烁，因此需要它。）
您可能不是supporting IE 6-8，所以请与event.target一起使用，不要担心event.srcElement。
修改：您实际上可以将.slider-nav a和.slider-content合并到一个大型DOM查询中，并立即从中删除current类。
let sliderNavsAndContents = document.querySelectorAll('.slider-nav a, .slider-content')
document.querySelector('.slider-nav').addEventListener('click', event => {
let target = document.querySelector(event.target.getAttribute('data-target'))
sliderNavsAndContents.forEach(e =>
e.classList[e === event.target || e === target ? 'add' : 'remove']('current')
)
event.preventDefault()
}).current {
background-color: blue;
color: red;
}<div class="slider-nav">
<ul>
<li><a class="current" href="#" data-target="#content1">Link to first paragraph</a></li>
<li><a href="#" data-target="#content2">Link to second pargraph</a></li>
<li><a href="#" data-target="#content3">Link to third pargraph</a></li>
</ul>
</div>
<div class="viewport">
<div id="content1" class="slider-content current">
<h3>Vestibulum ante ipsum</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</p>
<div><a class="readmore" href="#'">READ MORE</a></div>
</div>
<div id="content2" class="slider-content">
<h3>Nulla porttitor accumsan</h3>
<p>Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh.</p>
<div><a class="readmore" href="#'">READ MORE</a></div>
</div>
<div id="content3" class="slider-content">
<h3>Vivamus suscipit tortor eget</h3>
<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices .</p>
<div><a class="readmore" href="#'">READ MORE</a></div>
</div>
</div>
data-target属性;目标的id已嵌入到href中，您可以通过主播hash属性获取该目标。
let sliderNavsAndContents = document.querySelectorAll('.slider-nav a, .slider-content')
document.querySelector('.slider-nav').addEventListener('click', event => {
let target = document.querySelector(event.target.hash)
sliderNavsAndContents.forEach(e =>
e.classList[e === event.target || e === target ? 'add' : 'remove']('current')
)
}).current{
background-color: blue;
color: red;
}<div class="slider-nav">
<ul>
<li><a class="current" href="#content1">Link to first paragraph</a></li>
<li><a href="#content2">Link to second pargraph</a></li>
<li><a href="#content3">Link to third pargraph</a></li>
</ul>
</div>
<div class="viewport">
<div id="content1" class="slider-content current">
<h3>Vestibulum ante ipsum</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</p>
<div><a class="readmore" href="#'">READ MORE</a></div>
</div>
<div id="content2" class="slider-content">
<h3>Nulla porttitor accumsan</h3>
<p>Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh.</p>
<div><a class="readmore" href="#'">READ MORE</a></div>
</div>
<div id="content3" class="slider-content">
<h3>Vivamus suscipit tortor eget</h3>
<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices .</p>
<div><a class="readmore" href="#'">READ MORE</a></div>
</div>
</div>