时间戳

首页 > 解决方案 > 如果类不存在，则执行此操作，否则忽略

javascript - 如果类不存在，则执行此操作，否则忽略

问题描述

嗨，我在 Javascript 中尝试做的是查找 '.productDetails' div 中是否存在类 '.promo'，如果存在，则不需要采取任何措施，但如果它不存在，那么我想要它在跨度标签中打印副本。我知道这可以在 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>

标签： javascriptclassif-statementcontains

解决方案

首先，JS 中的 case 很重要（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>

推荐阅读