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>

data-championalphabeta中的数据是姓名。

Link to what i got currently

Answer 1

Barmar是对的，你必须先复制一份，然后才能对这个副本进行排序。

执行if语句的最后一种情况时，DOM会更新。

由于radiobuttonclicked函数总是从DOM中检索列表（行：var allChampions1 = $（“。masterychampsforsum＆gt; .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);
}

Javascript追加和撤消问题

1 个答案: