ul liのjQueryの問題

Question

jQueryを使用してselectをul liに変換しようとしていますが、何らかの理由で正しく動作しません。 Worldsボタンをクリックすると、リストが表示されます。誰かがリストから項目を選択するたびに、項目の上に緑色のオーバーレイが表示されます（下の図を参照）。

問題点：アイテムを複数回選択すると、下に示すように、すべてのアイテムに緑色のオーバーレイが表示されます。私はそれをオン/オフに切り替えるのと同じように、クリックされた項目ごとに1回だけ表示することになっています。

期待される結果：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

すべての世界 - ドロップダウン李に

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

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

}); 

をすべて選択したクラスを削除するには、このjqueryのコードを試してみてください