Javascript 检查元素是否有类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35615733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if element has class
提问by Lucky500
Trying to find a way to display a console.log when a div is clicked. I am trying do do a simple game, if you click on the right box, you will get a message that you won.
试图找到一种在单击 div 时显示 console.log 的方法。我正在尝试做一个简单的游戏，如果你点击右边的框，你会收到一条消息，你赢了。
as of now I am struggling with the bottom of my code, this part in particular:
截至目前，我正在努力解决代码的底部，特别是这部分：
function winningBox(){
if (boxes.hasClass){
console.log('you win');
} else {
console.log('you lose');
}
}
winningBox();How do I get this to work? if box clicked has class of 'winning' the message should console.log winning. Please take a look. By the way I need to complete this on Vanilla JavaScript
我如何让这个工作？如果单击的框具有“获胜”类，则消息应为 console.log 获胜。请看一下。顺便说一句，我需要在 Vanilla JavaScript 上完成这个
//cup game
//add three cups to screen
//select li element
var button;
var boxes = document.getElementsByTagName('li');
var array = [];
console.log('working');
document.addEventListener('DOMContentLoaded', init);
function init() {
document.addEventListener('click', winningBox);
//shuffle li elements, and ad an id
function test(boxes) {
var randomBox = boxes[Math.floor(Math.random() * boxes.length)];
array.push(randomBox);
console.log('randombox:', randomBox);
randomBox.classList.add('winning');
}
console.log(test(boxes));
//user can click on a cup to see if correct
function winningBox() {
if (boxes.hasClass) {
console.log('you win');
} else {
console.log('you lose');
}
}
winningBox();
//if cup is incorrect, display message
//if correct, display won message
//button to restart game
}body {
background-color: #bdc3c7;
}
.main {
background-color: #2c3e50;
width: 300px;
height: 100px;
}
li {
background-color: gray;
width: 80px;
height: 80px;
margin: 10px;
list-style-type: none;
display: inline-block;
position: relative;
}<body>
<container class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</container>
<script src="main.js"></script>
</body>回答by Alex Yatkevich
You can use Element.classList.containsfunction to check if specified class value exists in class attribute of the element.
您可以使用Element.classList.contains函数来检查元素的类属性中是否存在指定的类值。
So assertion should look like:
所以断言应该是这样的：
if (boxes.classList.contains('winning')) {
UPDAs Karl Wilbur noticed in the comments to my answer, boxesis a NodeList instance.
UPD正如 Karl Wilbur 在对我的回答的评论中注意到的那样，boxes是一个 NodeList 实例。
So, you have to convert it into array:
因此，您必须将其转换为数组：
var boxes = Array.prototype.slice.apply(document.getElementsByTagName('li'));
and you will be able to iterate over it:
你将能够迭代它：
boxes.some(function(el) {
return el.classList.contains('winning');
});
this should return true if at least one of the boxes contains a class name 'winning'.
如果至少有一个框包含类名“获胜”，则这应该返回 true。
回答by vsevolodts
I suggest to check each container (not an array as in previous answer):
我建议检查每个容器（不是前面答案中的数组）：
function checkawinner(box) {
box.addEventListener("click", function(){
if (box.classList.contains('winning')) {
console.log('you win');
} else {
console.log('you lose');
}
}, false);
}
for (index = 0; index < boxes.length; ++index) {
checkawinner(boxes[index]);
}
A pen with "alerts": http://codepen.io/VsevolodTS/pen/BKBjpP
带有“警报”的笔：http: //codepen.io/VsevolodTS/pen/BKBjpP
回答by Karl Wilbur
I think what you are trying to do is:
我认为您正在尝试做的是：
//user can click on a cup to see if correct
function winningBox(){
// ensure that we are not working against a cached list of elements
var boxes = document.getElementsByTagName('li');
for(i=0,len=boxes.length;i<len;i++) {
var box = boxes[i];
if (box.classList.contains('winning')){
console.log('you win');
} else {
console.log('you lose');
}
);
}
