js设置变量点击下一个移除上一个的状态,点击自己本身恢复状态
时间: 2024-04-29 17:22:02 浏览: 9
你可以通过添加一个状态变量来实现这个功能。具体来说,当点击一个元素时,你可以将该元素的状态变量设置为 true,然后将上一个被点击的元素的状态变量设置为 false。这样,在每次点击时,只有一个元素处于被选中状态。
例如,你可以使用以下代码来实现这个功能:
```javascript
// 初始化状态变量
var selectedElement = null;
// 点击事件处理函数
function handleElementClick(element) {
// 如果该元素已被选中,则取消选中
if (element === selectedElement) {
element.classList.remove('selected');
selectedElement = null;
}
// 如果该元素未被选中,则选中该元素,并取消上一个元素的选中状态
else {
if (selectedElement) {
selectedElement.classList.remove('selected');
}
element.classList.add('selected');
selectedElement = element;
}
}
// 绑定点击事件
var elements = document.querySelectorAll('.element');
elements.forEach(function(element) {
element.addEventListener('click', function() {
handleElementClick(element);
});
});
```
在这个例子中,我们首先定义了一个 `selectedElement` 变量来存储当前被选中的元素。在每次点击元素时,我们调用 `handleElementClick` 函数来处理点击事件。如果点击的是当前被选中的元素,则取消选中状态;否则,我们先取消上一个元素的选中状态,然后将该元素设置为选中状态,并更新 `selectedElement` 变量。最后,我们将事件处理函数绑定到每个元素的点击事件上。