將順序更改為升序或降序時如何保留標記的項目

Question

當我標記一個項目然后將其順序更改為升序或降序時，該項目將取消標記。 我不知道如何保持標記。

這是 plnkr 代碼，你可以在這里試試看它的樣子， https: //plnkr.co/edit/bSH8A6GwRrKizFTDpfYI?p=info

var idxEditare = -1;
var lista = [];

function adauga(form,event){
    event.preventDefault();
        var obj = {
    };

    obj.itemDes = form.querySelector("[name='itemDes']").value;

    lista.push(obj);
    draw();
    afiseazaLista();
}

function afiseazaLista(){
    document.querySelector("#add-form").reset();
    document.querySelector("#tabel").classList.remove("hidden");
}

function ascundeLista(){
    document.querySelector("#tabel").classList.add("hidden");
}


function empty(){
    var itemInput= document.querySelector("[name='itemDes']").value;

    if(itemInput===""){
        event.preventDefault();
        (alert(`Completeaza spatiile pentru a face o adaugire in lista`));
        return false;
    }

}

function mark(ceva){
    document.querySelector(`#target-${ceva}`).classList.add("description");
}

function asc(){
    lista.sort(function(a,b){
        if(a.itemDes>b.itemDes){
            return 1;
        } else if(a.itemDes<b.itemDes){
            return -1;
        } else{
            return 0;
        }
    });
    draw();
}

function desc(){
    lista.sort(function(a,b){
        if(a.itemDes<b.itemDes){
            return 1;
        } else if(a.itemDes>b.itemDes){
            return -1;
        } else{
            return 0;
        }
    });
    draw();
}

function draw(){
    var str = "";

        for(var i=0;i<lista.length;i++){
            str+=`<tr>
                <td id="target-${i}">${lista[i].itemDes}</td>
                <td>
                    <input type="button" value="Mark as buyed" onClick="mark(${i});"/>
                </td>
            </tr>`;
        }
        document.querySelector("#tabel tbody").innerHTML = str;
}

即使我將順序更改為升序或降序，該項目仍應保持標記。

Answer 1

您不會跟蹤已購買物品的變化，並且每次分類都會在不了解已購買物品的情況下重新繪制所有內容。

所以你可以在你的標記功能中保存購買的物品

   function mark(ceva){  
            lista[ceva].added = !lista[ceva].added;  

            if(lista[ceva].added){
            document.querySelector(`#target-${ceva}`).classList.add("description");
            } else {
            document.querySelector(`#target-${ceva}`).classList.remove("description");
            }
    }

現在您可以根據狀態添加或刪除購買項目，現在在您的繪制方法中檢查是否添加了項目。 如果添加它們，只需添加類。

function draw(){

            var str = "";

                for(var i=0;i<lista.length;i++){ 
                  var isAdded = lista[i].added ? "description" : "";
                    str+=`<tr>
                        <td id="target-${i}" class='${isAdded}'>${lista[i].itemDes}</td>
                        <td>
                            <input type="button" value="Mark as buyed" onClick=mark(${i}); "/>
                        </td>

                    </tr>`;
                }
                document.querySelector("#tabel tbody").innerHTML = str;
        }

工作演示： https : //plnkr.co/edit/L3FrZUYds46caHXaLdFX?p=preview