Блог

Главная - Вопросы по программированию - Если класс не существует, сделайте это иначе, игнорируйте

Если класс не существует, сделайте это иначе, игнорируйте

#javascript #class #if-statement #contains

Вопрос:

Привет, что я пытаюсь сделать в Javascript, так это найти, существует ли класс». promo «в div». ProductDetails», если это так, то никаких действий предпринимать не нужно, но если он не существует, я хочу, чтобы он напечатал копию в тегах span. Я знаю, что это можно сделать в jQuery, но вместо этого я хочу сделать это в обычном Javascript.

 var elem = document.querySelector('.product-details');
if(!elem.classlist.contains('.promo')){
   document.querySelector('.title').innerHTML  = "<span class="promo">Add Promo Banner</span>";
 } 
 .product-details {border: 1px black solid; margin: 10px 0} 
 <div class="product-details">
  <div class="title">Title</div>
  <div class="promo">Promo 20% off</div>
</div>

<div class="product-details">
  <div class="title">Title</div>
</div>

Комментарии:

1. Как показано в документации .classlist , вы должны передать фактическое имя класса, а не селектор класса .contains()

2. Во-первых, это classList . Во-вторых, в вашей строке есть неэкранированные кавычки. В — третьих, никогда не используйте .innerHTML = — используйте insertAdjacentHTML вместо этого. В-четвертых, вы проверяете, есть ли .product-details у самого элемента .promo класс; чтобы проверить, содержит ли элемент .promo дочерний, используйте .querySelector('.promo') .

Ответ №1:

Прежде всего, регистр имеет значение в JS ( classlist != classList ), должен быть верблюжий регистр classList . Кроме того, HtmlString ( "<span class="promo">Add Promo Banner</span>" ) неправильно отформатирован.

Вы можете проверить длину, получив элемент с querySelectorAll() :

 var elem = document.querySelectorAll('.product-details');
elem.forEach(function(el){
  if(!el.querySelectorAll('.promo').length){
    el.querySelector('.title').innerHTML  = "<span class=promo>Add Promo Banner</span>";
  }
}); 
 .product-details {border: 1px black solid; margin: 10px 0} 
 <div class="product-details">
  <div class="title">Title</div>
  <div class="promo">Promo 20% off</div>
</div>

<div class="product-details">
  <div class="title">Title</div>
</div>

Комментарии:

1. спасибо за это, но тег span с копией «Добавить промо-баннер» должен быть добавлен под вторым заголовком, так как класса .promo там не существует.

2. @leek1234, в этом случае вам нужно просмотреть все элементы и проверить состояние каждого из них. Я обновил ответ. Пожалуйста, проверьте:)

3. извините за последний вопрос, если бы я хотел узнать, существует ли класс .promo или класс .text, как бы я это сделал? Идея была бы та же самая, не печатать тег span с копией.

4. @leek1234, в этом случае вы можете добавить еще одно условие if(!el.querySelectorAll('.promo').length || !el.querySelectorAll('.text').length){

5. Спасибо @Mamun, я пробовал это, но, похоже, это не работает. Теперь метка span печатается на обоих.

Ответ №2:

Что касается JS, проблема в вашем коде заключается только в синтаксисе. Участник называется

<HTML element>.classList

Вы просто пропускаете заглавную букву L.

elem.classList не вернет ".classNameA .classNameB" , а скорее фактическое строковое значение атрибута класса, как это: "classNameA classNameB"

Но все же я не верю, что ваш код будет вести себя должным образом, если вы внесете эти изменения, потому что вы ищете элемент для класса, от которого он не наследуется. Элемент, который наследуется от "promo" , является дочерним элементом элемента, на который у вас есть ссылка.

Элемент, который вы ищете в своем конкретном коде, находится в elem.children массиве, который можно повторять.

Вы пытаетесь выполнить поиск по всем дочерним элементам всех элементов на странице, чтобы найти наследников .classList содержимого "promo" ? Если это так, вам следует ознакомиться с алгоритмами обхода деревьев! Более очевидные реализации этого заключаются в том, что вы начнете с какого-то корня и будете перемещаться вниз с помощью поиска по глубине или по ширине. Дом на самом деле-это просто гигантское дерево элементов.

Метки: , ,