Question

我制作了简单的javascript，用于添加和删除类以更改元素背景颜色。有一个用于添加新li元素的按钮，无论我添加多少个元素，它都会一直有效，但不会在列表的最后一个子元素上运行。

＆＃13;

var counter = 1;
var newItem = document.getElementById('ulist');
var btnInput = document.getElementById('clickMe');
var headLine = document.getElementById('headline');

newItem.addEventListener('click', actItem);

function actItem(e) {
  for (var i = 0; i < e.target.parentNode.children.length; i++) {
    if (e.target.parentNode.children[i].className === '') {
      e.target.className = 'active';
    } else {
      e.target.parentNode.children[i].className = '';
    }
  }
}

btnInput.addEventListener('click', addItem);

function addItem() {
  newItem.innerHTML += '<li>new item' + ' ' + counter + '</li>';
  counter++;
}

＆＃13;

.active {
  background-color: #FFFF80;
}

＆＃13;

<div class="container">

  <button id="clickMe">Input Itmes</button>

  <ul id="ulist">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourt Item</li>
  </ul>
</div>

＆＃13;

Answer 1

你的代码中的问题是for循环中的if条件，你检查if (e.target.parentNode.children[i].className === '') {这将至少为真，然后你将当前元素的类设置为活动。当你在循环中找到这个元素时，它已经执行了活动类else { e.target.parentNode.children[i].className = '';}并从中删除了活动类。在最后一个元素中，它将永远不会再次设置活动类。

要解决此问题，请在for循环中为所有子项设置className = ''，然后将当前元素的类设置为＆＃39; active＆＃39;，如下所示：

＆＃13;

var counter = 1;
var newItem = document.getElementById('ulist');
var btnInput = document.getElementById('clickMe');
var headLine = document.getElementById('headline');

newItem.addEventListener('click', actItem);

function actItem(e){
  var liChildren = e.target.parentNode.children;
  for(var i = 0; i<liChildren.length; i++){
     liChildren[i].className = '';
  }
  e.target.className = 'active';

}

＆＃13;

.active{
background-color:#FFFF80;
}

＆＃13;

<div class="container">

<button id="clickMe">Input Itmes</button>

<ul id="ulist">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourt Item</li>
</ul>
</div>

＆＃13;

使用js添加和删除类适用于除了最后一个子项之外的无序列表的每个元素

1 个答案: