Question

我对编程还很陌生，所以如果我觉得这是一个简单的问题，我深表歉意。

我基本上想听用户点击特定div（文章标题），然后检查类是否具有属性（值= 1）。 -实际上，我在代码中其他地方将div的值设置为0，以查看是否可行，我希望它在控制台中记录“ nope”，以确保代码看到有关该值的if语句。

非常感谢您的帮助！

document.getElementsByClassName('article-title')[I]
.addEventListener('click', function (event) {
   if(articleSource.hasAttribute("value"),("1");
   console.log("nope");

});

Answer 1

存在一些语法错误

1）索引[I]没有任何意义。您可能已经注意到，.getElementsByClassName返回元素的HTMLCollection（=数组，列表）。因此，如果您确定只有一个元素article-title，则必须采用索引[0]。但是实际上我建议您使用.querySelector('.article-title')，它将返回1个元素。

2）在If语句中，您必须与===（或至少==）进行比较其次，hasAttribute不返回值，而是返回值。所以你必须 if(articleSource.getAttribute('value') === '1')但...

3）什么是articleSource？您能告诉我们如何初始化吗？您确定这是HTMLElement吗？

Answer 2

问题代码处的if语句在

处语法错误

if(articleSource.hasAttribute("value"),("1");

如果逗号运算符不是比较运算符，则不需要使用"1"周围的括号，并且缺少if语句周围的右括号，并省略了分号;。

您可以使用.querySelectorAll()来获取设置了特定class的所有元素，使用.forEach()来迭代元素，使用.getAttribute()来检查元素属性，该属性返回一个字符串，使用严格相等运算符比较值。

document.querySelectorAll('.article-title')
.forEach(function (articleSource, index) {
  articleSource.addEventListener('click', function (event) {
    if (articleSource.getAttribute("value") === "1") {
      console.log("nope");
    }
  })
});

Answer 3

与for loop一起使用getElementsByClassName的替代答案，因为它返回了HTMLCollection；您将无法在HTMLCollection上使用forEach。

在每个元素上iterated之后，我们将添加一个事件侦听器，该事件侦听器基本上会获取元素实例并使用value来检索属性getAttribute。

一旦有了值，我们就可以将其包装在if块（或三进制）中，并记录该值是否等于1。

var elems = document.getElementsByClassName('article-title');

for (var i = 0; i < elems.length; i++) {
  elems[i].addEventListener('click', function () {
     if (this.getAttribute('value') === "1") {
        return console.log('yes');
     }
     return console.log('no');
  });
}

body {
  padding: 10px;
}

.article-title {
  width: 100%;
  height: 35px;
  border: 1px solid black;
  border-radius: 3px;
  margin-bottom: 20px;
  padding: 5px;
}

<div class="article-title">1 = no</div>
<div class="article-title">2 = no</div>
<div class="article-title" value="1">3 = yes</div>

GetElementsByClassName：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

HTMLCollection：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

Answer 4

非常感谢您提供所有答案。有几件事让你们看得更清楚。

基本上，这是一个NewsAPI项目，因此articleSource由api请求引入，我为其分配了一个类

articleSource.classList.add("article-source");

现在似乎已经纠正了if语句语法错误。关于属性的值，我最初在APIRequest之后进行设置（每个请求获得6个文章标题）。我之前用

articleSource.setAttribute('value',"0");

我这样做是为了检查if语句是否有效，将初始值设置为0并将if语句设置为1不会在控制台中写入任何内容，但是如果我将初始值更改为1，则会看到控制台日志

基本上，我想在我的项目的下一步中弄清楚这一点，即在提出请求时为6篇文章中的每一篇文章分配一个不同的值，然后单击读取这些值，并将其存储到数组;这样我就只有一个被单击的数组及其值。

hasAttribute，如果条件和click事件

4 个答案: