0

我正在尝试用javascript制作一个板。

在执行此操作时，我在li向ul.

会有几个ul，用户可以添加他点击li的ul“add_card”按钮。我确实尝试过，但它只添加到第一个ul.

这是我尝试过的。

HTML

<main>
<div id="myTitle" class="bigTitle">
  <input type="text" id="myInput" placeholder="TItle...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<div id="myBoard">
  <div id="myUL-con">

    <h3 contenteditable="true">Things to do</h3>

    <span class="close close_list"></span>

    <ul id="myUL" runat="server">
      <li id="node" draggable="true" ondragstart="drag(event)">
        <h4 id="sm_title" contenteditable="true">Do the meditation</h4>
        <span contenteditable="true">- before going to sleep</span>
      </li>          
    </ul>

    <span id="add_card" onclick="addCard()" type="button"></span>

  </div>      
</div>

CSS

/* When clicked on, add a background color and strikeout text */
ul li.checked {
  background: rgba(106, 140, 168, 0.82);
  color: #f4f5f7;
  text-decoration: line-through
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border: solid #f4f5f7;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px
}

JavaScript

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item or card item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function () {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function (e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var card = document.createElement("div");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue),
    h3 = document.createElement("h3");
  card.appendChild(h3);
  h3.appendChild(t);



 if (inputValue === '') {
    alert("You must write something!");
  } else {
    //Create new LIST and its CARD as well
    var myBoard = document.getElementById("myBoard");
    var newUl = myBoard.appendChild(card);
    var myUl = document.createElement("ul");
    var list = document.createElement("li");
    var h4 = document.createElement("p");
    var span = document.createElement("span");
    var close = document.createElement("span");
    var add_card = document.createElement("span");

    newUl.setAttribute("id", "myUL-con");
    newUl.appendChild(myUl);    

    newUl.appendChild(close);
    myUl.appendChild(list);
    myUl.setAttribute("id", "myUL");

    close.className = "close";

    list.appendChild(h4);
    h4.setAttribute("id", "sm_title");
    h4.setAttribute("contenteditable", "true");
    h4.textContent = "Title..";

    list.appendChild(span);
    span.setAttribute("contenteditable", "true");
    span.textContent = "- Note here..";

    var myNodelist = document.getElementsByTagName("LI");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
      var span = document.createElement("SPAN");
      var txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      myNodelist[i].appendChild(span);
    }

newUl.appendChild(add_card);
add_card.setAttribute("id", "add_card");
add_card.setAttribute("onclick", "addCard()");

//Reset the input value
var resetButton = document.getElementById("myInput");
if(resetButton){
        resetButton.value= "";
    }

  }

  // Again, create a "x" button to delete
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  card.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function () {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }


}

// Creat new Card
function addCard() {
  var ul = document.getElementById("myUL");
  var li = document.createElement("li");
  var add = document.getElementsByClassName("add");

  ul.appendChild(li);
  li.setAttribute("id", "node");
  li.className = "add";

  for (i = 0; i < add.length; i++) {
    add[i].onclick = function () {
      var div = this.parentElement;
      div.appendChild(li);
      console.log(div);
    }
  }
}

另外，请让我知道我应该在哪里编写代码，以使所有添加li的所有功能都像现有li的那样，因为应该工作的功能也不起作用。

4

1 回答 1

0

您的代码的行为方式是因为您将每个新的 li 元素附加到代表第一张卡的“myUL”。

你应该做的是给每个新元素一个唯一的 id。

我这样做的方式是在添加新元素时：

      let ulIdx = 1;
      ulIdx++;
      let myUL_id = "myUL"+ulIdx.toString();
      myUl.setAttribute("id", myUL_id);

newUl.appendChild(add_card);
add_card.id = "add_card"+ulIdx.toString();
add_card.innerText = "Add li element";
add_card.setAttribute("onclick", "addCard(this)");

然后在函数 addCard(el){} 中，包括以下行；

  var add_LI_element = el.getAttribute("id");
  var elIndex = add_LI_element.charAt(add_LI_element.length -1);
  var ul = document.getElementById("myUL"+elIndex);

我的工作示例stackblitz

于 2020-03-17T10:13:43.260 回答