ul li的jQuery問題

Question

我想通過使用jQuery將選擇轉換爲ul li，但由於某些原因它將無法正常工作。點擊Worlds按鈕時，將顯示一個列表。每次有人從列表中選擇一個項目時，會在項目上顯示綠色疊加層（請參閱下圖）。

以下是問題：當您多次選擇項目時，綠色疊加顯示在所有項目上，如下所示。它只應該顯示一次點擊每個項目，就好像我正在打開/關閉它。

預期的結果：http://jsfiddle.net/Starx/a6NJk/2/

實際結果：

$("#worldBtn").on("click", function() { 
 
    $('#displayWorlds').toggle(); 
 
}); 
 

 
var allOptions = $("#worlds-dropdown li"); 
 

 
$("ul").on("click", "li", function() { 
 
    console.log("clicked"); 
 
    allOptions.removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    $("ul").children('#displayWorlds').html($(this).html()); 
 
    allOptions.toggle(); 
 
}); 
 

 
$("#worldsClose").click(function (a) { 
 
    $('#displayWorlds').toggle(); 
 
    a.preventDefault(); 
 
});

.selected { 
 
background-color: rgba(16, 246, 136, 0.47); 
 
color: white; 
 
} 
 

 
li { 
 
padding: 8px 16px; 
 
border-radius: 6px; 
 
line-height: 1.429; 
 
-webkit-transition: .25s; 
 
transition: .25s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="worldBtn" type="button" class="btn btn-purple">Worlds <i class="fa fa-globe"></i></button> 
 

 
<div class="bitblobs-panel bitblobs-side-panel bitblobs-worlds-panel" id="displayWorlds" style="display: none;"> 
 
<ul class="worlds-dropdown custom-scrollbar" id="worldsClose"> 
 
    <li onclick="setserver('server.localhost:551');"> 
 
     <div class="worlds-text">Option 1</div> 
 
    </li> 
 
    <li onclick="setserver('server.localhost:551');"> 
 
     <div class="worlds-text">Option 2</div> 
 
    </li>

Answer 1

簡單的事實，您正在使用#worlds-dropdown li而不是.worlds-dropdown li。

我也不知道你爲什麼需要allOptions.toggle()，因爲這隱藏了li的東西。但我現在已經評論過了。如果這是您的功能，您可以取消註釋。

$("#worldBtn").on("click", function() { 
 
    $('#displayWorlds').toggle(); 
 
}); 
 

 
var allOptions = $(".worlds-dropdown li"); 
 

 
$("ul").on("click", "li", function() { 
 
    console.log("clicked"); 
 
    allOptions.removeClass('selected'); 
 
    console.log(allOptions.length); 
 
    $(this).addClass('selected'); 
 
    $("ul").children('#displayWorlds').html($(this).html()); 
 
    //allOptions.toggle(); 
 
}); 
 

 
$("#worldsClose").click(function (a) { 
 
    $('#displayWorlds').toggle(); 
 
    a.preventDefault(); 
 
});

.selected { 
 
background-color: rgba(16, 246, 136, 0.47); 
 
color: white; 
 
} 
 

 
li { 
 
padding: 8px 16px; 
 
border-radius: 6px; 
 
line-height: 1.429; 
 
-webkit-transition: .25s; 
 
transition: .25s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="worldBtn" type="button" class="btn btn-purple">Worlds <i class="fa fa-globe"></i></button> 
 

 
<div class="bitblobs-panel bitblobs-side-panel bitblobs-worlds-panel" id="displayWorlds" style="display: none;"> 
 
<ul class="worlds-dropdown custom-scrollbar" id="worldsClose"> 
 
    <li onclick="setserver('server.localhost:551');"> 
 
     <div class="worlds-text">Option 1</div> 
 
    </li> 
 
    <li onclick="setserver('server.localhost:551');"> 
 
     <div class="worlds-text">Option 2</div> 
 
    </li> 
 
</ul>

Answer 2

試試這個jQuery代碼以消除所有的世界，下拉列表裏所有選中的類

$("ul").on("click", "li", function() { 

    $(".worlds-dropdown li").each(function(){ 
     $(this).removeClass('selected'); 
    }); 

});