如何根据给定数据控制跨度特性

Question

以下 HTML 代码创建 3 个元素，并允许用户单击/选择它们。

const changeColor = (evt) => {
  if (evt.currentTarget.classList.contains("is-active")) {
    evt.currentTarget.classList.remove("is-active");
  } else {
    evt.currentTarget.classList.add("is-active");
  }
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => EL.addEventListener("click", changeColor));

.tagger1010 span {
  padding: 6px 10px;
  background: #D0E8E4;
  border-radius: 18px;
  color: #000000;
  font-family: Roboto;
  font-size: 12px;
  margin: 0 4px 8px 0;
  font-weight: 500;
  display: inline-block;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  border: 1px solid BBD0CD;
}

.tagger1010 span.is-active {
  background-color: #008fde;
  color: #ffffff;
}

.tagger1010 span:hover {
  background-color: #008fde;
  color: #ffffff;
}

<div class="tagger1010">
  <span>Google</span>
  <span>Microsoft</span>
  <span>Facebook</span>
  <span>LinkedIn</span>
</div>

<div class="as-console-wrapper"></div>
<div class="as-console"></div>

如果标签包含在给定列表中，我希望将跨度预分配为“处于活动状态”。

例如，如果您运行上面的代码，并且给定的列表包括“Microsoft”和“LinkedIn” - 我希望“Microsoft”和“LinkedIn”已经被突出显示并且背景颜色为 #008fde ，颜色为#ffffff。

有谁知道我怎么说，“如果这个 span 的文本包含在这个列表中，让它具有 is-active 特征”

Answer 1

在这里结帐 https://jsfiddle.net/qmx3105s/

<script type="text/javascript">
                const changeColor = (evt) => {
                    if (evt.currentTarget.classList.contains("is-active")){
                            evt.currentTarget.classList.remove("is-active");
                            localStorage.removeItem(evt.currentTarget.textContent);
                            
                     } else {
                          evt.currentTarget.classList.add("is-active");
                        localStorage.setItem(evt.currentTarget.textContent,'true');
                    }
                };
                const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
                EL_tagger1010_children.forEach(EL => {
                    console.log('EL',EL)
                    if(localStorage.getItem(EL.textContent)){
                        EL.classList.add("is-active");
                    }
                    EL.addEventListener("click", changeColor);
                });
        </script>

Answer 2

已编辑：Search by innerText 和 Find in Array 添加。

原文：我强烈建议将id="X" 添加到您的html 中，以便更轻松地定位特定标记。不得不依赖内部文本要复杂得多，也是不好的做法。

然后您需要一个数组来保存您的 ID 并对其进行迭代。最后我们添加.is-active

看起来是这样的：

const changeColor = (evt) => {
    if (evt.currentTarget.classList.contains("is-active")) {
        evt.currentTarget.classList.remove("is-active");
    } else {
        evt.currentTarget.classList.add("is-active");
    }
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => EL.addEventListener("click", changeColor));

var tag_names = ["Microsoft", "LinkedIn"];
var tags = document.getElementsByTagName("span");

for (var i = 0; i < tags.length; i++) {
    if(tag_names.indexOf( tags[i].textContent ) != -1){
       tags[i].classList.add('is-active');
    }
}

.tagger1010 span {
  padding: 6px 10px;
  background: #D0E8E4;
  border-radius: 18px;
  color: #000000;
  font-family: Roboto;
  font-size: 12px;
  margin: 0 4px 8px 0;
  font-weight: 500;
  display: inline-block;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  border: 1px solid BBD0CD;
}

.tagger1010 span.is-active {
  background-color: #008fde;
  color: #ffffff;
}

.tagger1010 span:hover {
  background-color: #008fde;
  color: #ffffff;
}

<div class="tagger1010">
  <span>Google</span>
  <span>Microsoft</span>
  <span>Facebook</span>
  <span>LinkedIn</span>
</div>

<div class="as-console-wrapper"></div>
<div class="as-console"></div>