Question

我有lis的列表。如果选择了li，它将获得橙色的背景颜色，之前的“选定”li's背景颜色将被删除。

问题是，如果选择相同的li 3次，则没有任何反应。第一次，它获得橙色的背景颜色。第二次，背景颜色将被删除。第三次，背景颜色应该变为橙色，但事实并非如此。没有任何事情发生。

如何在第三次选中时重新出现橙色，并且每次都有“正常”行为？

JSFiddle

"use strict"

var parentElem = document.getElementById('wrapper'),
  cells = parentElem.firstElementChild.children,
  previousColorNameSelection = parentElem.children[0];

parentElem.firstElementChild.addEventListener('click', function(e) {
  var currentTarget;

  if (e.target.tagName === 'LI') {
    currentTarget = e.target.firstElementChild.firstElementChild;
  } else if (hasClass(e.target, 'namesInnerWrapper')) {
    currentTarget = e.target.firstElementChild;
  } else if (hasClass(e.target, 'namesName')) {
    currentTarget = e.target;
  }
  console.log(currentTarget.innerHTML, currentTarget);

  currentTarget.parentElement.parentElement.style.backgroundColor = 'orange';
  previousColorNameSelection.parentElement.parentElement.style.backgroundColor = '';
  previousColorNameSelection = currentTarget;
});

function hasClass(ele, cls) {
  return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

#wrapper {
  width: 300px;
}
li:nth-child(odd) {
  background: rgba(100, 200, 255, 0.1);
}
li {
  list-style-type: none;
}
ul {
  position: relative;
  height: 350px;
}

<div id="wrapper">
  <ul>
    <li style="width:100%">
      <div class="namesInnerWrapper"><span class="namesName">balancing</span>
      </div>
    </li>
    <li style="width:100%">
      <div class="namesInnerWrapper"><span class="namesName">preknow</span>
      </div>
    </li>
    <li style="width:100%">
      <div class="namesInnerWrapper"><span class="namesName">barents</span>
      </div>
    </li>
    <li style="width:100%">
      <div class="namesInnerWrapper"><span class="namesName">underwash</span>
      </div>
    </li>
    <li style="width:100%">
      <div class="namesInnerWrapper"><span class="namesName">immaterializing</span>
      </div>
    </li>
    <li style="width:100%">
      <div class="namesInnerWrapper"><span class="namesName">noncreditor</span>
      </div>
    </li>
    <li style="width:100%">
      <div class="namesInnerWrapper"><span class="namesName">unrevised</span>
      </div>
    </li>
  </ul>
</div>

Answer 1

我将在jQuery中给你一个答案，因为它更加简单。（JSFiddle）

让我们首先使用一个类来指定背景颜色。更容易使用。

li.active{
  background-color: orange;
}

然后让我们像这样使用jQuery：

$(function(){

    $('li').on('click', function(){

        // Save whether or not the li being clicked is already selected
        var alreadySelected = $(this).hasClass('active') ? true : false;

        // Remove the active class from all list items
        $('li').removeClass('active');

        // If it wasn't already selected, then select it now
        if(!alreadySelected) $(this).addClass('active');

    });

});

重新选择李不工作

JSFiddle

1 个答案: