在 javascript 中添加 class 而不定位父元素

Question

这段代码我有问题：

document.querySelector('.location__list-link[data-area-id="'+areaId+'"]').parentElement.classList.add("plop");

我实际上想将“plop”class 添加到“.location__list-link”，但后面还有一个 class。不应考虑最后一个 class。

HTML 是：

<div class="location__wrapper">
  <div class="location__content">
    <ul class="location__list">
      <li class="location__list-item"><a data-area-id="1" class="location__list-link fond-bleu" href="https://www.antibes-juanlespins.com/">Antibes Juan-les-Pins</a></li>
      <li class="location__list-item" ><a data-area-id="22" class="location__list-link fond-vert" href="http://bezaudun.fr/">Bézaudun-les-Alpes</a></li>
      <li class="location__list-item" ><a data-area-id="3" class="location__list-link fond-bleu" href="https://www.biot.fr/">Biot</a></li>
      <li class="location__list-item"><a data-area-id="21" class="location__list-link fond-vert" href="https://bouyon.fr/">Bouyon</a></li>
    </ul>
  </div>
</div>

而且我不知道如何向我的选择中添加第二个 class 或如何处理 .parentElement，因为当我删除它时它根本不起作用。提前谢谢你:)

Answer 1

只需删除 parentElement 即可正常工作。你可以完全忽略其他class元素上列出的：

const areaId=3
document.querySelector('.location__list-link[data-area-id="'+areaId+'"]').classList.add("plop");

.plop{ background-color:red}

<div class="location__wrapper">
  <div class="location__content">
    <ul class="location__list">
      <li class="location__list-item"><a data-area-id="1" class="location__list-link fond-bleu" href="https://www.antibes-juanlespins.com/">Antibes Juan-les-Pins</a></li>
      <li class="location__list-item"><a data-area-id="22" class="location__list-link fond-vert" href="http://bezaudun.fr/">Bézaudun-les-Alpes</a></li>
      <li class="location__list-item"><a data-area-id="3" class="location__list-link fond-bleu" href="https://www.biot.fr/">Biot</a></li>
      <li class="location__list-item"><a data-area-id="21" class="location__list-link fond-vert" href="https://bouyon.fr/">Bouyon</a></li>
    </ul>
  </div>
</div>

在 javascript 中添加 class 而不定位父元素

Add a class in javascript without targeting the parent element

javascript

class

parent