简单的高亮显示一次只能显示一个元素功能

我有一个选择（用于高亮显示）的类，我一次只能添加一个元素，所以每次点击一个新元素时，它都会将选中的类添加到该元素中并从任何以前点击的元素中移除选定的类 - 无论是哪个。简单的高亮显示一次只能显示一个元素功能

如果直接点击下一个/上一个元素（按钮），我只能使它工作。

如果我点击按钮1，然后例如按钮4，那么它只是不断添加类。

var myButtons = document.querySelectorAll('.my-button'); 

for (var i = 0; i < myButtons.length; i++) { 

    var button = myButtons[i]; 

    button.addEventListener('click', function(event) { 

    this.classList.toggle("selected"); 
    this.previousElementSibling.classList.remove("selected"); 
    this.nextElementSibling.classList.remove("selected"); 

}); 

}

我知道为什么上面不行，我直接告诉它只是地址下一个/上，但是我一直在使用的if/else班级列表包含试过了，！这一点。 classList.contains，e.currentTarget的各种组合，但我不能让它工作。

我想我在寻找类似：

如果（任何myButtons.classList.contains（ “选择”））
删除选定
其他
添加选定

我花了几个小时寻找一个香草JS解决方案，但我只能找到jQuery - 我想学习纯JavaScript。

有人可以给我一些指针吗？将不胜感激！

来源

2016-06-10 Capax

哇，我得到了一些伟大的答案了，我希望我能知道如何判断哪一个是“最好的”。 – Capax

@DavidWickström解决方案不是我认为最好的。 –

你会发现这里是处理该问题的另一种方式。首先，内部forEach循环负责从所有按钮中删除“selected”类，然后将该类添加到单击的按钮中。

Array.prototype.forEach.call(buttons, function(b) { 
    b.addEventListener('click', function(e) { 
    Array.prototype.forEach.call(buttons, function(b) { 
     b.classList.remove('selected') 
    }) 
    b.classList.toggle('selected') 
    }) 
})

来源

2016-06-10 08:33:28

谢谢，哇有很多方法来解决这个问题似乎，我需要深入了解forEach.call – Capax

你是受欢迎的。使用forEach而不是常规的for-loop只是一个偏好问题。我的建议的主要观点是，在将其应用到单击的按钮之前，您会触发一个首先删除所有类的循环。 –

我喜欢这种方法，并且我学到了一些新的东西，谢谢你！ – Capax

我修改了一下你的代码。这里的更新https://jsfiddle.net/giuseppe_straziota/s6s0yb2k/

我已经插入此cicle

for (var i = 0; i < myButtons.length; i++) { 
         var button2 = myButtons[i]; 
       button2.classList.remove("selected"); 
     }

来源

2016-06-10 08:21:34

另一个伟大的，谢谢！这个特殊的属于嵌套循环类别，对吧？我试图从我得到的不同解决方案中学习:-) – Capax

是的。虽然，这不是更优雅:) –

那么你可以使用

document.querySelectorAll(".selected")

(function() { 
 

 
    var myButtons = document.querySelectorAll('.my-button'); 
 

 
    for (var i = 0; i < myButtons.length; i++) { 
 

 
    var button = myButtons[i]; 
 

 
    button.addEventListener('click', function(event) { 
 
     var x = document.querySelectorAll(".selected"); 
 
     if(x.length) { 
 
     \t x[0].classList.remove('selected'); 
 
     } 
 
     this.classList.toggle("selected"); 
 
     
 

 
    }); 
 
    } 
 
})();

.selected { 
 
    background: darkred; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 

 

 
    <div class="my-button">Button 1</div> 
 

 
    <div class="my-button">Button 2</div> 
 

 

 
    <div class="my-button">Button 3</div> 
 
    <div class="my-button">Button 4</div> 
 

 
    <div class="my-button">Button 5</div> 
 
    <div class="my-button">Button 6</div> 
 

 

 
</body> 
 

 
</html>

来源

2016-06-10 08:35:43 XeNo13GrIn

非常感谢，这很有趣，你称这种类型的循环是什么？我认为这是一个嵌套的循环，但不知道（我渴望学习）。 – Capax

这一个不使用循环。它只是改变了'选择'类的第一个元素。 x [0] .classList.remove（'selected'）; – XeNo13GrIn

简单的高亮显示一次只能显示一个元素功能

回答

相关问题