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

将订单更改为升序或降序时如何保留标记的项目

1 个答案: