检查元素是不是有类[重复]
Posted
技术标签:
【中文标题】检查元素是不是有类[重复]【英文标题】：Check if element has class [duplicate]检查元素是否有类[重复] 【发布时间】：2016-06-07 13:04:06 【问题描述】：试图找到一种在单击 div 时显示 console.log 的方法。我正在尝试做一个简单的游戏，如果你点击右边的框，你会收到一条消息，你赢了。
到目前为止，我一直在努力解决代码的底部问题，尤其是这部分：
function winningBox()
if (boxes.hasClass)
console.log('you win');
else
console.log('you lose');
winningBox();如何让它工作？如果单击的框具有“获胜”类，则该消息应在 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>【问题讨论】：
【参考方案1】：您可以使用Element.classList.contains函数检查元素的class属性中是否存在指定的class值。
所以断言应该是这样的：
if (boxes.classList.contains('winning'))
UPD
正如 Karl Wilbur 在 cmets 中对我的回答所注意到的，boxes 是一个 NodeList 实例。
所以，你必须把它转换成数组：
var boxes = Array.prototype.slice.apply(document.getElementsByTagName('li'));
您将能够对其进行迭代：
boxes.some(function(el)
return el.classList.contains('winning');
);
如果至少有一个框包含类名“获胜”，则这应该返回 true。
【讨论】：
是的，它给了我某种类型的错误...... 那么，如何准确地告诉我们错误信息是什么？ 无法读取未定义的“包含” 如果boxes.classList 是undefined，那么您可能会将boxes 视为一个元素数组。您可能需要迭代 boxes。
classList.contains('class_name') 为我工作:)【参考方案2】：
我建议检查每个容器（不是上一个答案中的数组）：
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]);
带有“警报”的笔：http://codepen.io/VsevolodTS/pen/BKBjpP
【讨论】：
【参考方案3】：我认为你想要做的是：
//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');
);
【讨论】：
以上是关于检查元素是不是有类[重复]的主要内容，如果未能解决你的问题，请参考以下文章