jQuery：更改所有 li 图标的 CSS 类，期望选定的 li 图标

Question

我在ul 的所有li 元素中使用Font Awesome Icons

问题

当用户单击用户图标时，我将图标的颜色从黑色变为黄色。如果用户点击另一个图标，它也会变成黄色

如何删除已经存在的黄色图标。这意味着那里应该只有一个黄色图标。 Fiddle Here

HTML

<ul id="user-list">
    <li class='black user'><i class="fa fa-user"></i></li>
     <li class='black user'><i class="fa fa-user"></i></li>
     <li class='black user'><i class="fa fa-user"></i></li>
     <li class='black user'><i class="fa fa-user"></i></li>
</ul>

jQuery

$(".user").click(function (e) {
                if ($(this).hasClass("yellow")) {
                    $(this).removeClass("yellow");
                    $(this).addClass("black");
                } else {
                    $(this).removeClass("black");
                    $(this).addClass("yellow");
                }
});

Answer 1

在添加从元素中删除类之前使用$(".user.yellow").not(this).removeClass()：

  $(".user.yellow").not(this).removeClass();

您还可以使用.toggleClass() 来缩小代码范围，而不是检查和显示/隐藏。

 var user = $(".user").click(function (e) {
   user.filter('.yellow').not(this).toggleClass('yellow black');
   $(this).toggleClass("yellow black");
 });

Working Demo

Answer 2

我自己的建议如下：

// binding the anonymous function of the click() method
// as the click event-handler:
$(".user").click(function (e) {

    // toggling between the named classes (if the element currently
    // has the class of 'black' it will be switched to 'yellow', and
    // vice-versa:
    $(this).toggleClass('black yellow')

        // switching to the siblings, selecting only those with the
        // class of 'yellow' and toggling those elements' class
        // to switch from 'yellow' class-name to 'black':
        .siblings('.yellow').toggleClass('yellow black');
});

$(".user").click(function(e) {
  $(this).toggleClass('black yellow').siblings('.yellow').toggleClass('yellow black');
});

@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
 #user-list {
  list-style: none;
  cursor: pointer;
}
li {
  margin: 0 0 0.5em 0;
  border: 1px solid #000;
  border-radius: 1em;
  padding: 0.5em;
}
.yellow {
  color: yellow;
}
.black {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="user-list">
  <li class='black user'><i class="fa fa-user"></i>
  </li>
  <li class='black user'><i class="fa fa-user"></i>
  </li>
  <li class='black user'><i class="fa fa-user"></i>
  </li>
  <li class='black user'><i class="fa fa-user"></i>
  </li>
</ul>

外部JS Fiddle demo。

此外，要使用纯 JavaScript，以下也是一种选择：

function highlightOnlyActive() {
    // the settings for the function:
    var s = {
        'activeClassName' : 'yellow',
        'inactiveClassName' : 'black'
    },

    // caching the 'this' variable for
    // use within other scopes:
        current = this;

    // Using Function.prototype.call() to allow the use of
    // Array.prototype.forEach() on the Array-like NodeList
    // returned by document.querySelectorAll(), allowing us
    // to iterate over the returned NodeList as an Array and
    // perform a function/action on each item returned:
    Array.prototype.forEach.call(this.parentNode.children, function (el) {

            // if the current Node ('el') is not the clicked-node
            // ('current'):
            if (el !== current) {

                // we unconditionally remove the 's.activeClassName'
                // and add the 's.inactiveClassName':
                el.classList.remove(s.activeClassName);
                el.classList.add(s.inactiveClassName);
            }
        });

    // here we simply toggle the 's.inactiveClassName' and
    // 's.activeClassName' classes:
    current.classList.toggle(s.activeClassName);
    current.classList.toggle(s.inactiveClassName);  
}

Array.prototype.forEach.call(document.querySelectorAll('#user-list li.user'), function (elem) {
    elem.addEventListener('click', highlightOnlyActive);
});

function highlightOnlyActive() {
  var s = {
      'activeClassName': 'yellow',
      'inactiveClassName': 'black'
    },
    current = this;
  Array.prototype.forEach.call(this.parentNode.children, function(el) {
    if (el !== current) {
      el.classList.remove(s.activeClassName);
      el.classList.add(s.inactiveClassName);
    }
  });

  current.classList.toggle(s.activeClassName);
  current.classList.toggle(s.inactiveClassName);
}

Array.prototype.forEach.call(document.querySelectorAll('#user-list li.user'), function(elem) {
  elem.addEventListener('click', highlightOnlyActive);
});

@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
 #user-list {
  list-style: none;
  cursor: pointer;
}
li {
  margin: 0 0 0.5em 0;
  border: 1px solid #000;
  border-radius: 1em;
  padding: 0.5em;
}
.yellow {
  color: yellow;
}
.black {
  color: black;
}

<ul id="user-list">
  <li class='black user'><i class="fa fa-user"></i>
  </li>
  <li class='black user'><i class="fa fa-user"></i>
  </li>
  <li class='black user'><i class="fa fa-user"></i>
  </li>
  <li class='black user'><i class="fa fa-user"></i>
  </li>
</ul>

外部JS Fiddle demo。

参考资料：

• JavaScript：
  • Array.prototype.forEach()。
  • Array.prototype.slice()。
  • document.querySelectorAll()。
  • Element.classList。
  • Function.prototype.call()。
• jQuery:
  • click()。
  • siblings()。
  • toggleClass()。