Проблемы с добавлением и отменой Javascript

Question

У меня возникли проблемы с javascript. Я пытаюсь создать функцию, когда я нажимаю переключатель, он будет запускать эту функцию. (Я получил это, чтобы работать).

Моя проблема в том, что я нажимаю на переключатель, чтобы заказать его в алфавитном порядке, но затем, когда я нажал на другие переключатели, чтобы изменить функцию, он по-прежнему заказывается по алфавиту из-за «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); 
}