jQuery：更改所有li圖標的CSS類，期望所選li圖標

Question

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

問題

當用戶單擊用戶圖標時，我將圖標的顏色從黑色變為黃色。 如果用戶單擊另一個圖標，它將也呈黃色

如何刪除已經存在的黃色圖標。 這意味着那里應該只有一個黃色圖標。 小提琴在這里

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

工作演示

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演示 。

此外，要使用純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演示 。

參考文獻：

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