的Javascript追加和撤消我有javascript中的幾個問題的問題

Question

。我試圖創建一個函數，當我點擊一個單選按鈕時，它將運行該函數。 （我得到這個工作）。

我的問題是，當我點擊單選按鈕來按順序排列命令，但當我點擊其他單選按鈕來更改功能時，它仍然按字母順序排序，因爲「APPEND」我的問題是我怎樣才能讓我的程序所以當我按字母順序殺人時，它只是爲了這個命令而命令，而當我點擊回到別的命令時，它的命令是如何發生的。

這裏是我的代碼部分：

的Javascript：

function radiobuttonclicked() { 

    var allChampions1 = $(".masterychampsforsum > .colzz"); 
    var selectedcheckyesnochest = document.getElementsByName("optioncheckradiomasterychamps"); 

    if (selectedcheckyesnochest[0].checked == true) { 
     allChampions1.show(); 
    } 
    else if (selectedcheckyesnochest[1].checked == true) { 
     var selectedChampions1 = $(".masterychampsforsum > .colzz[data-chest-champion^='yes']"); 
     allChampions1.hide(); 
     selectedChampions1.show(); 
    } 
    else if (selectedcheckyesnochest[2].checked == true) { 
     var selectedChampions1 = $(".masterychampsforsum > .colzz[data-ranked-champion^='yes']"); 
     allChampions1.hide(); 
     selectedChampions1.show(); 
    } else if (selectedcheckyesnochest[3].checked == true) { 
     var alphabeticallyOrderedDivs = $('.colzz').sort(function(a, b) { 
      return String.prototype.localeCompare.call($(a).data('championalphabeta').toLowerCase(), $(b).data('championalphabeta').toLowerCase()); 
     }); 
     var container = $("#masterychampsforum"); 
     container.detach().empty().append(alphabeticallyOrderedDivs); 
     $('.summonerLayout-summary').append(container); 
    } 
} 

HTML：

<div class="tabItem Content SummonerLayoutContent summonerLayout-summary" data-tab-spinner-height="800" data-tab-is-loaded-already="true"> 
<div class="SearchChampion" style="margin-top:20px;padding: 10px;border: 1px solid #000;background-color: #111111;"> 
    <form class="SearchChampionForm" onsubmit="return false;" style="position: relative;"> 

     <input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Chest" id="option_all" onclick="radiobuttonclicked();" checked/> <label for="option_all" style="font-size:16px;">ALL</label> 
     <input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Chest" id="option_chest" onclick="radiobuttonclicked();"/> <label for="option_chest" style="font-size:16px;">CHEST</label> 
     <input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Ranked" id="option_ranked" onclick="radiobuttonclicked();"/> <label for="option_ranked" style="font-size:16px;">RANKED</label> 
     <input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Ranked" id="option_alpha" onclick="radiobuttonclicked();"/> <label for="option_alpha" style="font-size:16px;">ALPHABETICAL</label> 
    </form> 
</div> 

<div class="masterychampsforsum" id="masterychampsforum"> 
<div class="colzz" data-champion-name="'.$getLeagueKeyNamelistsidez.'" data-champion-key="'.$getLeagueKeyNamelistsidez.'" data-chest-champion="'.$champchestyes.'" data-ranked-champion="'.$checkchampionidyesnotrue.'" data-championalphabeta="'.$getLeagueKeyNamelistsidez.'"> 


</div> 
</div> 

在數據championalphabeta的數據是名稱。

Link to what i got currently

Answer 1

Barmar是正確的，你必須先進行復印，然後你可以排序對這個副本。

當執行你的if語句的最後情況下，DOM被更新。由於函數radiobuttonclicked總是從DOM中檢索列表（行：var allChampions1 = $（「。masterychampsforsum> .colzz」）），函數的所有下一次執行都將檢索先前排序的列表，並且您的原始訂單已經丟失。

而是嘗試（不是最好的代碼永遠但此背景下，會做）：

var allChampions1 
function radiobuttonclicked() { 
    if(!allChampions1) 
     allChampions1 = $(".masterychampsforsum > .colzz").clone(); 

    var selectedcheckyesnochest = document.getElementsByName("optioncheckradiomasterychamps"); 

    if (selectedcheckyesnochest[0].checked == true) { 
     updateContainer(allChampions1); 
    } else if (selectedcheckyesnochest[1].checked == true) { 
     var selectedChampions1 = allChampions1.filter("[data-chest-champion^='yes']"); 
     updateContainer(selectedChampions1); 
    } else if (selectedcheckyesnochest[2].checked == true) { 
     var selectedChampions1 = allChampions1.filter("[data-ranked-champion^='yes']"); 
     updateContainer(selectedChampions1); 
    } else if (selectedcheckyesnochest[3].checked == true) { 
     var alphabeticallyOrderedDivs = allChampions1.clone().sort(function(a, b) { 
      return String.prototype.localeCompare.call($(a).data('championalphabeta').toLowerCase(), $(b).data('championalphabeta').toLowerCase()); 
     }); 
     updateContainer(alphabeticallyOrderedDivs); 
    } 
} 

function updateContainer(newList){ 
    var container = $("#masterychampsforum"); 
    container.detach().empty().append(newList); 
    $('.summonerLayout-summary').append(container); 
}