Question

在列表中添加新项目时，我希望它根据输入值更改颜色。

如何将input.value添加到我新添加的li项？

如果有人能提供帮助，我已经创建了一个codepen http://codepen.io/o-sewell/pen/mOBjvQ

// DIV TOGGLE
const toggleButton = document.querySelector('#toggleList');
const listDiv = document.querySelector('.list');

// User INPUT
const userInput = document.querySelector('.userInput');
const button = document.querySelector('button.description');
const p = document.querySelector('p.description');
let listItem = document.querySelectorAll('li');

// ADD ITEM
const addItemInput = document.querySelector('.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');

button.addEventListener('click', () => {
  for (let i = 0; i < listItem.length; i++) {
    listItem[i].style.color = userInput.value;
  }

  p.innerHTML = userInput.value + ':';
});

toggleButton.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    listDiv.style.display = 'block';
    toggleButton.textContent = 'Hide list';
  } else {
    listDiv.style.display = 'none';
    toggleButton.textContent = 'Show list';
  }
});

addItemButton.addEventListener('click', () => {
  let list = document.querySelector('ul');
  let li = document.createElement('li');

  li.textContent = addItemInput.value;
  let appendedItem = list.appendChild(li);

  console.log(appendedItem);

  for (let i = 0; i < appendedItem.length; i++) {
    appendedItem[i].style.color = userInput.value;
  }

  console.log(appended item);

  addItemInput.value = '';
});

Answer 1

这是新的：

//DIV TOGGLE
const toggleButton = document.querySelector('#toggleList');
const listDiv = document.querySelector('.list');
var lastPickedColor = "black"; // it will store the last picked color
//User INPUT
const userInput = document.querySelector('.userInput');
const button = document.querySelector('button.description');
const p = document.querySelector('p.description');
let listItem = document.querySelectorAll('li');

//ADD ITEM
const addItemInput = document.querySelector('.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');

button.addEventListener('click', () => {
   lastPickedColor = userInput.value;
   for(let i = 0; i < listItem.length; i++) {
     listItem[i].style.color = lastPickedColor;
   }
   p.innerHTML = userInput.value + ':';
});

toggleButton.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    listDiv.style.display = 'block';
    toggleButton.textContent = 'Hide list';
  } else {
    listDiv.style.display = 'none';
    toggleButton.textContent = 'Show list';
  }
});

addItemButton.addEventListener('click', () => {
  let list = document.querySelector('ul');
  let li = document.createElement('li');
  li.style.color = lastPickedColor; // so it will add li with last picked color
  li.textContent = addItemInput.value;
  let appendedItem = list.appendChild(li);
  console.log(appendedItem);
  for(let i = 0; i < appendedItem.length; i++) {
    appendedItem[i].style.color = userInput.value;
  } 
  console.log(appendeditem);
  addItemInput.value = '';
});

每次更改颜色时，我都会将lastPickedColor变量添加到页面顶部，它将存储lastPickedColor，并使用此颜色添加所有列表。

Answer 2

答案很简单。

您在执行js时定义初始列表，但新元素是动态创建的。因此，您必须基于所有元素（包括新元素）创建新的节点列表。您可以在当前点击事件中重新定义它：

button.addEventListener('click', () => {
   listItem = document.querySelectorAll('li');
   for(let i = 0; i < listItem.length; i++) {
        listItem[i].style.color = userInput.value;
   }
   p.innerHTML = userInput.value + ':';
});

要使其颜色与现有颜色相同，请更改此功能以直接在最新添加的元素上应用样式：

addItemButton.addEventListener('click', () => {
  let list = document.querySelector('ul');
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  let appendedItem = list.appendChild(li);
  appendedItem.style.color = userInput.value;
  addItemInput.value = '';
});

Working codepen example

Answer 3

因此我对您的代码进行了2次更改。请参阅 http://codepen.io/amoolya/pen/GNMXqa?editors=1111

首先改变

Qubit & Qubit::operator ^(const Qubit & qubit)
{
    Qubit *q = new Qubit;
    ((this->state == 1 && qubit.state == 0) ||
        (this->state == 0 && qubit.state == 1)) ? q->SetState(1) : q->SetState(0);
    return *q;
}

第二次改变：

我添加了

   addItemButton.addEventListener('click', () => {
       let list = document.querySelector('ul');
       let li = document.createElement('li');
       li.textContent = addItemInput.value;
       let appendedItem = list.appendChild(li); 
       appendedItem.style.color =  list.firstElementChild.style.color; //The newly appended item is given the color of the first list element. In your case, this would be whatever color the user chose last.
   });

在颜色更改按钮的事件处理程序中，以便每次计算新列表的长度。

添加样式颜色到附加的li - Javascript

3 个答案: