добавление списка классов переключения в добавленные дочерние элементы

Question 1

Я пытаюсь переключить classList для добавленных детей; У меня есть переключатель для работы с уже существующими, но когда я добавляю через пользовательский ввод, он не будет работать, какие-либо советы о том, как я могу это сделать? потому что на данный момент я в растерянности, пожалуйста, помогите!

var button = document.getElementById("enter");
var ul = document.querySelector("ul");
var input = document.getElementById("userinput");
var list = document.getElementsByTagName("li");

function listDone() {}

function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
}
function addListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeyPress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeyPress);

function listDoneToggle() {
for (i = 0; i < list.length; i++) {
list[i].addEventListener("click", function() {
this.classList.toggle("done");
});
}
}
listDoneToggle();

javascript html css

1

Tyler77156 26 Окт 2019 в 00:07

Answer

Вы можете просто добавить прослушиватель событий к создаваемому элементу. Во-первых, вы можете выделить обработчик события в его собственную именованную функцию, чтобы его можно было использовать в нескольких местах и иметь только одну функцию для поддержки на случай, если позже потребуется изменение:

function applyToggle() {
  this.classList.toggle("done");
}

А затем отредактируйте свой код следующим образом:

function createListElement() {
  var li = document.createElement("li");
  li.addEventListener("click", applyToggle); // <--
  // ...
}

function listDoneToggle() {
  for (i = 0; i < list.length; i++) {
    list[i].addEventListener("click", applyToggle); // <--
  }
}

При желании, если вы хотите повторно использовать переменную list позже и иметь все свои элементы (включая те, которые вы создали динамически), вы также можете поместить их в этот список:

function createListElement() {
  var li = document.createElement("li");
  li.addEventListener("click", applyToggle); 
  Array.prototype.push.apply(list, li); // <--
  // ...
}

1

blex 26 Окт 2019 в 00:27

Question 2

Вы можете просто добавить прослушиватель событий к создаваемому элементу. Во-первых, вы можете выделить обработчик события в его собственную именованную функцию, чтобы его можно было использовать в нескольких местах и иметь только одну функцию для поддержки на случай, если позже потребуется изменение:

function applyToggle() {
  this.classList.toggle("done");
}

А затем отредактируйте свой код следующим образом:

function createListElement() {
  var li = document.createElement("li");
  li.addEventListener("click", applyToggle); // <--
  // ...
}

function listDoneToggle() {
  for (i = 0; i < list.length; i++) {
    list[i].addEventListener("click", applyToggle); // <--
  }
}

При желании, если вы хотите повторно использовать переменную list позже и иметь все свои элементы (включая те, которые вы создали динамически), вы также можете поместить их в этот список:

function createListElement() {
  var li = document.createElement("li");
  li.addEventListener("click", applyToggle); 
  Array.prototype.push.apply(list, li); // <--
  // ...
}

1

blex 26 Окт 2019 в 00:27

добавление списка классов переключения в добавленные дочерние элементы

1 ответ

Похожие вопросы

Новые вопросы

javascript