代码之家 › 专栏 › 技术社区 › Axel

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

css html javascript

Axel · 技术社区 · 6 年前

我有一个3 <a> 每个有类的标记 categoryItem 包裹在各自父母的身体里,每个人都上课 categoryLists .

我想要的是 a 单击li时标记为红色。例如:如果点击了第一个li,那么它应该只给第一个li上色 一 标记而不是着色所有 一 标签。

我试着用 for 循环,但它似乎不起作用,因为它将具有 一 标签。

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>

2 回复 | 直到 6 年前

Facundo Larrosa 6 年前

试试这个。不需要身份证:

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>

Patrick Evans 6 年前

通过 this 以这种方式调用内联js函数时,函数将引用已单击的元素。

onclick="changeColor(this)"

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

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

然后进行必要的操作,注意使用css类而不是直接的样式操作。

item.classList.remove('active')

演示

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');
  }
}

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

.categoryItem.active {
  color: red;
}

<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>