用es6里的class类怎么做一个排他
时间: 2023-09-24 11:13:12 浏览: 38
排他是指在某个范围内只能有一个对象被选中或操作。使用ES6的class类可以实现一个简单的排他功能,具体实现如下:
```javascript
class Exclusive {
static selected = null; // 用静态属性记录当前选中的对象
constructor(element) {
this.element = element;
this.element.addEventListener('click', this.handleClick.bind(this));
}
handleClick() {
if (Exclusive.selected !== null) { // 如果已有对象被选中,则取消选中
Exclusive.selected.element.classList.remove('selected');
}
this.element.classList.add('selected'); // 选中当前对象
Exclusive.selected = this; // 更新静态属性
}
}
```
使用方法:
```javascript
const elements = document.querySelectorAll('.item');
for (let i = 0; i < elements.length; i++) {
new Exclusive(elements[i]);
}
```
在这个例子中,我们创建了一个`Exclusive`类,它接受一个DOM元素作为参数,可以在该元素被点击时将其选中,并取消之前选中的元素。
我们用一个静态属性`selected`记录当前被选中的对象。在点击事件中,如果已有对象被选中,则取消选中,并选中当前对象。最后更新`selected`属性为当前对象。
使用时,我们可以通过`querySelectorAll`方法获取所有需要排他的元素,然后通过循环将它们实例化成`Exclusive`对象即可。