0

我正在使用类制作任务计划器。

这些任务以动态附加卡片的形式保存。

我在 CardManager 类的数组中添加三张卡片。

当我通过按下删除按钮选择要删除的卡时，id 被正确检索，但在最后delfunc一个有循环的函数中for，我得到了错误的数组长度。

所以拼接不起作用。

问题出在调用的最后一个函数的循环中delfunc()。

class Card {
    constructor(id, cname, pic, description, assignee, dDate, st) {
        this.id = id;
        this.cname = cname;
        this.pic = pic;
        this.description = description;
        this.assignee = assignee;
        this.dDate = dDate;
        this.st = st;
        // this.info=info;
    }
}
class CardManager {
    constructor() {
        this.cardArr = [];
        this.currentId = 1;
    }
    addcard(cname, pic, description, assignee, dDate, st) {
        const nCard = new Card(this.currentId++, cname, pic, description, assignee, dDate, st); //creates 
        an instance of class card
        this.cardArr.push(nCard);
    }

}
const cardDeck = new CardManager(); //create an instance of card manager to access the members


// cardDeck.addcard("laundry","test","testing","Saeed","thursday","to do");
let tname = document.querySelector("#text1"); //accepting user input from form
let tdes = document.querySelector("#des");
let assignee = document.querySelector("#assignee");
let dDate = document.querySelector("#dDate");
let sTatus = document.querySelector("#stAtus");


let addButton = document.querySelector("#addButton");

addButton.onclick = function () {
    alert("here i am card deck");
    cardDeck.addcard(tname.value, "test", tdes.value, assignee.value, dDate.value, sTatus.value);
    $('#myModal').modal('hide');
}


let btn1 = document.querySelector("#btn1");
let buttonCount = 1;

btn1.onclick = function displayListHtml() {

    let html = "";
    alert(cardDeck.cardArr.length);

    for (let i = 0; i < cardDeck.cardArr.length; i++) {
        html = `<div class="card">
                   <h1>${cardDeck.cardArr[i].cname}</h1>
                   <img src="sample.jpg" alt="Denim Jeans" style="width:100%">
                   <p>${cardDeck.cardArr[i].description}</p>
                   <p>${cardDeck.cardArr[i].assignee}</p>
                   <p>${cardDeck.cardArr[i].dDate}</p>
                   <p>${cardDeck.cardArr[i].st}</p>
                   <p>${cardDeck.cardArr[i].id}</p>
                   <p><button class="delete btn btn-primary" id="dbutton_${cardDeck.cardArr[i].id}"> 
                   Delete</button></p>
                   <p><button class="Edit btn btn-primary" id="ebutton_${cardDeck.cardArr[i].id}"> 
                   Edit</button></p>
                   </div>`;
        buttonCount++;
    }
    const taskcontainer = document.querySelector("#taskcontainer");
    const element = document.createRange().createContextualFragment(html);
    element.querySelector("button.delete")
        .addEventListener("click", delfunc);
    element.querySelector("button.Edit")
        .addEventListener("click", edifunc);
    //  element.addEventListener("click",yourClickEventHandler);
    taskcontainer.append(element);
}

function delfunc() {

    alert("i am in delete function");
    const taskElement = event.target.closest(".delete"); //see line 74.
    let delIdArr = taskElement.id.split("_"); //spliting the id by underscore. i.e . dbuton_id 
    let retreiveId = delIdArr[1];

    for (let j = 0; j < this.cardDeck.cardArr.length; j++) {
        if (retreiveId === j) {
            this.cardDeck.cardArr.splice(retreiveId, 1);
        }
    }
}
4

2 回答 2

0 
function delfunc() {
        alert("I am in delete function");
        const taskElement = event.target.closest(".delete");//see line 74.
        let delIdArr = taskElement.id.split("_"); 
        let retrieveId = delIdArr[1];
        var arr=[];

        for (let j = 1; j <= cardDeck.cardArr.length; j++ ) {
              if (retrieveId == j) {
                  arr = cardDeck.cardArr.splice(retreiveId, 1);
              }
于 2020-08-19T03:47:42.953 回答
0

这是您关心的最小版本。但看起来splice呼叫按预期进行。

const del = (cardArr, retreiveId) => {
  for (let j = 0; j < cardArr.length; j++) {
    if (retreiveId === j) {
      cardArr.splice(retreiveId, 1);
    }
  }
};

const cardArr = [2, 3, 4];
// delete the index 1
del(cardArr, 1);

console.log(cardArr);

// Case where delete index out of array index
const a = [1];
del(a, 1)
console.log(a);

于 2020-08-13T15:22:35.963 回答