javascript - 如何在不使用 jQuery 的情况下使用 onclick 函数检查类名

Question

我想检查一个元素在点击时是否有类名。我有调用该函数的点击事件，但没有任何内容记录到控制台。有趣的是，document.write 有效，但无论我单击什么，即使 HTML 元素具有类名，它也会记录 else。

HTML

<p>What is 2+2?</p>
<a href="#" class="answer wrong">5</a>
<a href="#" class="answer correct">4</a>
<a href="#" class="answer wrong">7</div>
<a href="#" class="answer wrong">2</div>

CSS

var wrongMsg = "Sorry, that's not the answer"
var correctMsg = "Correct!"
var answers = document.getElementsByClassName("answer");

for (var i=answers.length; i--;){
    answers[i].addEventListener('click', checkMulti);
};

function checkMulti(){
    if ( this.className == "correct" ){
        console.log(correctMsg);
    }else{
        console.log(wrongMsg);
    }
}

Answer 1

您需要使用 classList 中的方法 contains。

var wrongMsg = "Sorry, that's not the answer"
var correctMsg = "Correct!"
var answers = document.getElementsByClassName("answer");

for (var i = answers.length; i--;) {
  answers[i].addEventListener('click', checkMulti);
};

function checkMulti() {
  if (this.classList.contains("correct")) {
    console.log(correctMsg);
  } else {
    console.log(wrongMsg);
  }
}

<p>What is 2+2?</p>
<a href="#" class="answer wrong">5</a>
<a href="#" class="answer correct">4</a>
<a href="#" class="answer wrong">7</div>
<a href="#" class="answer wrong">2</div>

资源

• > Element.classList