hasAttribute, если условие и событие клика - PullRequest
Новая
       29

hasAttribute, если условие и событие клика

0 голосов
/ 08 февраля 2019

Я довольно новичок в программировании, поэтому извиняюсь, если это кажется простым вопросом, на который я должен знать ответ.

Я в основном хочу прослушать щелчок пользователя на конкретном div (article-title) и проверьте, есть ли у класса атрибут (значение = 1).-Я фактически устанавливаю значения div в другом месте в коде на 0, чтобы увидеть, работает ли это, я хочу, чтобы он записывал «nope» в консоли, чтобы быть уверенным, что код видел оператор if о значении значения.

Большое спасибо за вашу помощь! 

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

});

Ответы [ 4 ]

0 голосов
/ 09 февраля 2019

Большое спасибо за все ваши ответы.Итак, несколько вещей, которые вы, ребята, видите более понятными.

По сути, это проект NewsAPI, поэтому articleSource вводится запросом API, и я назначаю ему класс

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

Кажется, теперь работает, исправив синтаксическую ошибку оператора if.Что касается значения атрибута, я установил его изначально после APIRequest (я получаю 6 заголовков статей за запрос).Я установил его ранее с помощью

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

Я сделал это, чтобы проверить, что оператор if сработал, установив начальное значение равным 0 и оператор if, равный единице, ничего не записал бы в консоль., но если бы я изменил начальное значение на 1, я бы увидел консольный журнал.

По сути, я хотел выяснить это для следующего шага моего проекта, который будет заключаться в назначении различного значения каждомуиз 6 статей, когда запрос сделан, и затем прочитайте эти значения по щелчку, сохраняя их в массиве;так что у меня есть массив только тех, которые были нажаты и их значение.

0 голосов
/ 09 февраля 2019

Альтернативный ответ, используя for loop с вашим getElementsByClassName, так как он возвращает HTMLCollection;Вы не сможете использовать forEach на HTMLCollection.

Как только мы 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

0 голосов
/ 09 февраля 2019

Есть некоторые синтаксические ошибки

1) index [I] ничего не значит.Как вы, возможно, заметили, .getElementsByClassName возвращает HTMLCollection (= массив, список) элементов.Таким образом, вы должны взять индекс [0], если вы уверены, что есть только один элемент article-title.Но на самом деле я советую вам использовать .querySelector('.article-title'), который вернет 1 элемент.

2) В операторе If вы должны сравнить с === (или хотя бы ==). Во-вторых, hasAttributeне возвращает значение, но присутствие.Таким образом, вы должны if(articleSource.getAttribute('value') === '1'), но ...

3) Что такое articleSource?Не могли бы вы показать нам, как вы его инициализировали?Вы уверены, что это HTMLElement?

0 голосов
/ 09 февраля 2019

Оператор 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");
    }
  })
});
...