您是否可以使用Javascript将事件侦听器动态添加到for循环中的变量

Question

我正在尝试动态地将eventlistener添加到一组将切换CSS类的li标记中。

​

const item = $('#dynamic-list').getElementsByTagName('li');

const strikeOut = () => this.classList = this.classList.toggle('strike-out');

const addClass = function() {
  for (let i = 0; i < item.length; i++) {
    let link = item[i];
    link.onclick = strikeOut;
  }
}

addClass();

.strike-item {
  text-decoration: line-through;
}

<ul id="dynamic-list" style="list-style: none;">
  <li class="dynamic-item">Item 1</li>
  <li class="dynamic-item">Item 2</li>
  <li class="dynamic-item">Item 3</li>
  <li class="dynamic-item">Item 4</li>
  <li class="dynamic-item">Item 5</li>
</ul>

​

我有一种感觉，我没有正确地为每个链接分配删除函数，但我对所有建议都持开放态度

Answer 1

需要解决的一些问题：

• jQuery集合没有getElementsByTagName函数。不需要jQuery，只需使用普通的querySelectorAll
• Arrow函数就可以了--它们并不会捕获它们的调用上下文--相反，它们继承了周围代码块的调用上下文。改为使用标准函数，以便strikeOut内的this引用被单击的元素
• 您的CSS引用strike-item，但JS切换类名strike-out.

修复后：

​

const item = document.querySelectorAll('#dynamic-list li');

const strikeOut = function() {
  this.classList.toggle('strike-item');
}

const addClass = function() {
  for (let i = 0; i < item.length; i++) {
    let link = item[i];
    link.onclick = strikeOut;
  }
}

addClass();

.strike-item {
  text-decoration: line-through;
}

<ul id="dynamic-list" style="list-style: none;">
  <li class="dynamic-item">Item 1</li>
  <li class="dynamic-item">Item 2</li>
  <li class="dynamic-item">Item 3</li>
  <li class="dynamic-item">Item 4</li>
  <li class="dynamic-item">Item 5</li>
</ul>

​

但是您可以考虑改用事件委派，这样您只需为每个li添加一个监听器，而不是添加一个监听器

​

document.querySelector('#dynamic-list')
  .addEventListener('click', (e) => {
    const { target } = e;
    if (!target.matches('li.dynamic-item')) return;
    target.classList.toggle('strike-item');
  });

.strike-item {
  text-decoration: line-through;
}

<ul id="dynamic-list" style="list-style: none;">
  <li class="dynamic-item">Item 1</li>
  <li class="dynamic-item">Item 2</li>
  <li class="dynamic-item">Item 3</li>
  <li class="dynamic-item">Item 4</li>
  <li class="dynamic-item">Item 5</li>
</ul>

​

Answer 2

这里有很多地方出了问题，getElementsByTagName不是一个jquery选择器，它是一个javascript选择器。以下是如何切换的示例：

​

const item = $('#dynamic-list li');

const strikeOut = (e) =>{ 
  $(e.target).toggleClass('strike-item')
}

const addClass = function() {
    for( let i=0; i<item.length; i++) {
        let link = item[i];
        link.onclick = strikeOut;
    }
}

addClass();

.strike-item {
    text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dynamic-list" style="list-style: none;">
 <li class="dynamic-item">Item 1</li>
 <li class="dynamic-item">Item 2</li>
 <li class="dynamic-item">Item 3</li>
 <li class="dynamic-item">Item 4</li>
 <li class="dynamic-item">Item 5</li>
</ul>

​

Answer 3

你可以在这里尝试简单的代码

​

function myAction(me){
  me.classList.toggle('strike-out');
}

.dynamic-item.strike-out {
  text-decoration: line-through;
}

<ul id="dynamic-list" style="list-style: none;">
  <li class="dynamic-item" onClick="myAction(this)">Item 1</li>
  <li class="dynamic-item" onClick="myAction(this)">Item 2</li>
  <li class="dynamic-item" onClick="myAction(this)">Item 3</li>
  <li class="dynamic-item" onClick="myAction(this)">Item 4</li>
  <li class="dynamic-item" onClick="myAction(this)">Item 5</li>
</ul>

​