Question

面对我无法理解如何使用元素语句管理的事情，例如使用事件侦听器切换类。下面的代码显示了带有click事件的按钮，它添加了类，如果有其他类，则会删除它。但每次最后一个按钮都不会对该事件作出反应。任何人都可以解释我为什么以及如何处理它？

＆＃13;

let buttons = document.querySelectorAll('button');
Array.from(buttons).forEach(function(el, i){
	el.addEventListener('click', function(){ 
		
		for(let val of buttons) {
			console.log(val)
			if(val.classList.contains('red')){
		   		val.classList.remove('red');
			} else {
		   		el.classList.add('red');
		    }
		}		
	})
})

＆＃13;

.red {
	color: red;
}

＆＃13;

<button>button 1</button>
<button>button 2</button>
<button>button 3</button>

＆＃13;

有没有更好的方法来处理这些类通过纯JS切换？

Answer 1

所以你不想把你所点击的那个“红色”加到你所有的那个上去吗？

const buttons = document.querySelectorAll('button');

Array.from(buttons).forEach(function(x){
	x.addEventListener('click', function(b){ 		
		unsetRed();
		b.srcElement.classList.add('red');
	})
})

function unsetRed(){
	[].forEach.call(document.querySelectorAll('button.red'), function(x) {
		x.classList.remove('red');
	});
}

.red {
  color:red;
}

<button>Button</button>
<button>Button</button>
<button>Button</button>

Answer 2

你在if-else语句代码中犯了一些错误：

在这里，我纠正了它：

let buttons = document.querySelectorAll('button');
Array.from(buttons).forEach(function(el, i){
	el.addEventListener('click', function(){ 
		
		for(let val of buttons) {
			if(val.classList.contains('red')){
		   		val.classList.remove('red');
			}
                el.classList.add('red');
		        console.log(val)
		}		
	})
})

.red {
	color: red;
}

<button>button 1</button>
<button>button 2</button>
<button>button 3</button>

希望，它会对你有用。感谢

Answer 3

首先只是为了展示，你稍微缩短了一些代码。它并不完全符合您的要求（将在下一个片段中显示）。但它的作用几乎就是你想要的。单击它会将类切换为红色。缺少的部分是，它不会切换所有其他按钮。

let buttons = document.querySelectorAll('button');
buttons.forEach(function(element){
	element.addEventListener('click', function(){ 
  		if(element.classList.contains('red')){
		   		element.classList.remove('red');
			} else {
		   		element.classList.add('red');
		  }
	});
});

.red {
	color: red;
}

<button>button 1</button>
<button>button 2</button>
<button>button 3</button>

因此可以在代码中找到一些解释。但首先。永远不要切换像red这样的类，但要切换类似active之类的类。为什么？因为如果您的客户想要将其更改为绿色，您只需要更改CSS而不是JS。如果将代码与上面的代码进行比较，则没有太大区别。除了在添加活动类之前我们做了一些更多的事情，这就是删除所有活动类。

这只是为了让您了解如何handle和fire事件。你可以做更多的事情。也喜欢传递参数，元素或任何你需要的东西。获得正确的东西并作出反应......

let buttons = document.querySelectorAll('button');
buttons.forEach(function(element){
    element.addEventListener('click', function(){ 
        if(element.classList.contains('active')){
            element.classList.remove('active');
        } else {
            // this is like: "Fire event on the document"
            document.dispatchEvent(new CustomEvent('toggle-all-my-buttons', {}));
            element.classList.add('active');
        }
    });
});

// here we listen on the document and can react if it gets fired no matter from where
document.addEventListener('toggle-all-my-buttons', function(){
    console.log('toggle all my buttons');
    buttons.forEach(function(element){
        element.classList.remove('active');
    });
});

.active {
    color: red;
}

<button>button 1</button>
<button>button 2</button>
<button>button 3</button>

来自queryselector和eventlistener问题的数组

3 个答案: