檢查元素是否具有類

試圖找到單擊div時顯示console.log的方法。我試圖做一個簡單的遊戲，如果你點擊右邊的框，你會得到一個消息，你贏了。檢查元素是否具有類

截至目前，我與我的代碼的底部掙扎，這部分特別：

function winningBox(){ 
 

 
\t if (boxes.hasClass){ 
 

 
\t \t console.log('you win'); 
 
\t } else { 
 
\t \t console.log('you lose'); 
 
\t } 
 
} 
 
winningBox();

我如何得到這個工作？如果框點擊了'獲勝'的消息，應該console.log獲勝。請看一下。順便說一句，我需要完成這個對香草的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(){ 
 
\t document.addEventListener('click', winningBox); 
 

 

 
//shuffle li elements, and ad an id 
 
function test(boxes){ 
 
\t var randomBox = boxes[Math.floor(Math.random() * boxes.length)]; 
 
\t array.push(randomBox); 
 
\t console.log('randombox:', randomBox); 
 
\t randomBox.classList.add('winning'); 
 

 
} 
 
console.log(test(boxes)); 
 

 

 
//user can click on a cup to see if correct 
 
function winningBox(){ 
 

 
\t if (boxes.hasClass){ 
 

 
\t \t console.log('you win'); 
 
\t } else { 
 
\t \t console.log('you lose'); 
 
\t } 
 
} 
 
winningBox(); 
 

 
//if cup is incorrect, display message 
 
//if correct, display won message 
 
//button to restart game 
 
}

body { 
 
\t background-color: #bdc3c7; 
 
} 
 

 
.main { 
 
\t background-color: #2c3e50; 
 
\t width: 300px; 
 
\t height: 100px; 
 
} 
 

 

 
li { 
 
\t background-color: gray; 
 
\t width: 80px; 
 
\t height: 80px; 
 
\t margin: 10px; 
 
\t list-style-type: none; 
 
\t display: inline-block; 
 
\t position: relative; 
 

 
}

<body> 
 
\t <container class="main"> 
 
\t \t <ul> 
 
\t \t \t <li>1</li> 
 
\t \t \t <li>2</li> 
 
\t \t \t <li>3</li> 
 
\t \t </ul> 
 
\t </container> 
 
\t <script src="main.js"></script> 
 
</body>

來源

2016-02-25 Lucky500

可以使用Element.classList.contains功能檢查中的元素的類屬性存在指定的類值。

因此斷言應該是這樣的：

if (boxes.classList.contains('winning')) {

UPD 正如卡爾·威爾伯的意見，我的答案注意到，boxes是一個節點列表實例。

所以，你必須把它轉換成數組：

var boxes = Array.prototype.slice.apply(document.getElementsByTagName('li'));

，你就可以遍歷它：

boxes.some(function(el) { 
    return el.classList.contains('winning'); 
});

這應該返回true，如果盒子的至少一個包含班級名稱「獲勝」。

來源

2016-02-25 00:07:07

是的，它給了我一些類型的錯誤.... – Lucky500

那麼如何準確地告訴我們錯誤信息是什麼？ – nnnnnn

無法讀取未定義的'contains' – Lucky500

我建議檢查每個容器（不是數組在前面的答案）：

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

來源

2016-02-25 00:59:24 vsevolodts

我認爲你正在試圖做的是：

//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'); 
     } 
    ); 
}

來源

2016-02-25 01:12:07

檢查元素是否具有類

回答

相關問題