Question

我希望做一个相当简单的操作：你点击一个li，你就可以使用JavaScript（而不是JQuery）获取文本。我能弄清楚（或找出）的是如何获得innerHTML。

function enable() {
  document.addEventListener('click', e => {
    if (e.target.classList.contains('refine-menu-li')) {
      var selected = this.innerHTML;
      console.log('stuff'); // Working
      console.log(selected); // Not working
    } 
  });
}

我使用的问题class是否需要for - 循环？或this尝试使用是愚蠢的事情吗？

谢谢！

Answer 1

箭头函数从声明它们的上下文中捕获this。

this.innerHTML不是您要找的innerHTML。

您可能想要e.target.innerHTML。

如果您没有使用箭头功能，那么this将不是您想要的值。事件处理程序在它们绑定的元素的上下文中调用（在本例中为document），而不是触发事件的元素。

Answer 2

试试这个

function enable() {
  document.addEventListener('click', e => {
    
    var current = e.target;
    
    if (e.target.classList.contains('refine-menu-li')) {
      var selected = current.innerHTML;
      console.log('stuff'); // Working
      console.log(selected); // Not working
    } 
  });
}

enable();

<ul>
  <li class='refine-menu-li a'>1 </li>
  <li class='refine-menu-li b '>2</li>
  <li class='refine-menu-li c '>3</li>
  <li class='refine-menu-li d'>4</li>
</ul>

Answer 3

你可以尝试这样的东西，而不使用箭头功能：

 document.getElementById("js-list")
         .addEventListener("click",function(e) {
            if(e.target && e.target.nodeName == "LI") {
              console.log(e.target.innerHTML);
            }
         });

<ul id="js-list">
   <li>value1</li>
   <li>value2</li>
   <li>value3</li>
</ul>

查找此元素中的文本

3 个答案: