时间戳

首页 > 解决方案 > 我想使用按钮更改我的 UL 中的某些名称

javascript - 我想使用按钮更改我的 UL 中的某些名称

问题描述

我想使用单击按钮将 UL 中的 9 个名称更改为红色字体，而其他 3 个名称仍为黑色字体。我想要一个按钮将红色字体重置为原始字体。任何人都可以帮忙吗？

var title = document.getElementById("title");
var buttons = document.getElementsByClassName("btn");
var buttons = document.getElementsByClassName("btn2");

for (var btnIndex = 0; btnIndex < buttons.length; btnIndex++) {
  buttons[btnIndex].onclick = function() {
    title.style.color = this.getAttribute('data-color');
  }
} else {
  title1.style.color = this.getAttribute('data-color');
}
<ul>
  <li id="title">John</li>
  <li id="title">Jack</li>
  <li id="title">Joe</li>
  <li id="title1">Jim</li>
  <li id="title">David</li>
  <li id="title">Sam</li>
  <li id="title1">Jay</li>
  <li id="title">Frank</li>
  <li id="title">Tim</li>
  <li id="title">Zack</li>
  <li id="title">Lewis</li>
  <li id="title1">Danny</li>

  <button class="btn" data-color="red">Change 9 names to red</button>
  <button class="btn2" data-color="black">Reset</button>
</ul>

标签： javascript

解决方案

您的标记存在一些问题，我将在下面解决，但要回答您的实际问题，您可以执行以下操作：

// get references to the buttons
const button1 = document.querySelector('.btn');
const button2 = document.querySelector('.btn2');

// declare a function that adds the class 'red' to items matching the given selector
const select = selector => {
  [...document.querySelectorAll(selector)].forEach(
    element => element.classList.add('red')
  );
}

// declare a function that removes the given class from all elements that currently have it
const deselect = className => {
  [...document.querySelectorAll('.' + className)].forEach(
    element => element.classList.remove(className)
  );
}

// add a click handler to the button that invokes the
// select function above for items whose class includes 'title'
button1.addEventListener('click', () => select('.title'));

// add a click handler to the second button that removes the 'red' class from all items
button2.addEventListener('click', () => deselect('red'));
.red {
  color: red;
}
<ul>
  <li class="title">John</li>
  <li class="title">Jack</li>
  <li class="title">Joe</li>
  <li class="title1">Jim</li>
  <li class="title">David</li>
  <li class="title">Sam</li>
  <li class="title1">Jay</li>
  <li class="title">Frank</li>
  <li class="title">Tim</li>
  <li class="title">Zack</li>
  <li class="title">Lewis</li>
  <li class="title1">Danny</li>
</ul>

<button class="btn" data-color="red">Change 9 names to red</button>
<button class="btn2" data-color="black">Reset</button>

更有效的解决方案

这可能不适合您的需求，但如果您只想更改title项目的颜色，您可以在 上切换类<ul>并应用 css 规则：

// get references to the button and ul
const button = document.querySelector('.btn');
const ul = document.querySelector('ul');

// toggle a class on the ul
button.addEventListener('click', () => ul.classList.toggle('red'));
/*
color 'title' items when the
ul has the 'red' class
*/
ul.red .title {
  color: red;
}
<ul>
  <li class="title">John</li>
  <li class="title">Jack</li>
  <li class="title">Joe</li>
  <li class="title1">Jim</li>
  <li class="title">David</li>
  <li class="title">Sam</li>
  <li class="title1">Jay</li>
  <li class="title">Frank</li>
  <li class="title">Tim</li>
  <li class="title">Zack</li>
  <li class="title">Lewis</li>
  <li class="title1">Danny</li>
</ul>

<button class="btn">Toggle 'title' items to red</button>

标记问题

  1. id属性在文档中必须是唯一的。如果您需要将相同的标识符附加到多个元素，请class改用。
  2. <button>不能是 的孩子<ul>。

推荐阅读