Question

我有3个<a>标记，每个标记都包含在各自父母的内部categoryItem，每个标记都有categoryLists个字段。

我想要的是在点击li时将a标记为红色。例如：如果点击了第一个li，那么它应该只为第一个a标记着色，而不是为所有a标记着色。

我尝试使用for循环，但它似乎不起作用，因为它为具有a标记的整个元素着色。

function changeColor() {
    let catItem = document.getElementsByClassName('categoryItem');
    for(let i = 0; i < catItem.length; i++) {
      catItem[i].style.setProperty('color', 'red', 'important');
    }
}

.categoryItem {
  text-decoration: none;
  color: green;
}

<li class="categoryList" onclick="changeColor()">First
  <a href="#" class="categoryItem">First Link</a>
</li>
<li class="categoryList" onclick="changeColor()">Second
  <a href="#" class="categoryItem">Second Link</a>
</li>
<li class="categoryList" onclick="changeColor()">Third
  <a href="#" class="categoryItem">Third Link</a>
</li>

Answer 1

试试这个。不需要id：

function changeColor(el) {       
  el.querySelector('a.categoryItem').style.setProperty('color', 'red', 'important');
}

.categoryItem {
  text-decoration: none;
  color: green;
}

<ul>
   <li class="categoryList" onclick="changeColor(this)">First
     <a  href="#" class="categoryItem">First Link</a>
   </li>
   <li class="categoryList" onclick="changeColor(this)">Second
     <a href="#" class="categoryItem">Second Link</a>
   </li>
   <li class="categoryList" onclick="changeColor(this)">Third
     <a href="#" class="categoryItem">Third Link</a>
   </li>
</ul>

Answer 2

将this传递给你的内联js函数调用，这样你的函数就会引用被点击的元素。

onclick="changeColor(this)"

然后使用querySelector()或类似的DOM方法获取该元素的子锚标记。

var item = listElement.querySelector('a.categoryItem');

从那里进行必要的操作，注意使用css类而不是直接样式操作。

item.classList.remove('active')

演示

＆＃13;

function changeColor(listElement) {
  //clear the active class from current active
  var active = listElement.parentElement.querySelector('a.categoryItem.active');
  if(active){
    active.classList.remove('active');
  }

  //set the class of the newly clicked element.
  var item = listElement.querySelector('a.categoryItem');
  if (item) {
    item.classList.add('active');
  }
}

＆＃13;

.categoryItem {
  text-decoration: none;
  color: green;
}

.categoryItem.active {
  color: red;
}

＆＃13;

<ul>
  <li class="categoryList" onclick="changeColor(this)">First
    <a href="#" class="categoryItem">First Link</a>
  </li>
  <li class="categoryList" onclick="changeColor(this)">Second
    <a href="#" class="categoryItem">Second Link</a>
  </li>
  <li class="categoryList" onclick="changeColor(this)">Third
    <a href="#" class="categoryItem">Third Link</a>
  </li>
</ul>

＆＃13;

使用父元素的onclick事件更改子元素的颜色

2 个答案: