查找此元素内的文本

我正在寻找一个相当简单的操作：您点击一个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 -loop问题？或者是this一个愚蠢的东西尝试和使用？

谢谢！

来源

2016-08-11 dedaumiersmith

你觉得什么'这是指？因为在这种情况下，它引用'enable（）'函数的'this'上下文。 – Aeolingamenfel

“你点击李” - 列表项不是交互式控件。使用键盘导航的人不能选择它们。使用屏幕阅读器的用户无法选择它们。可以围绕这些问题进行讨论，但有一个更简单的解决方案：**如果您希望用户单击，则可以使用按钮**（可以位于列表项中，并且可以使用任何您喜欢的CSS）这不是一个链接。 – Quentin

你可以尝试这样的事情，不使用箭头功能：

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>

来源

2016-08-11 16:50:03 Christos

箭头功能从他们在声明的背景下捕捉this。

this.innerHTML是不是你正在寻找的innerHTML。你可能想要e.target.innerHTML。

如果你没有使用一个箭头的功能，然后将this不会是你想要的值。事件处理程序在它们绑定的元素的上下文中调用（在这种情况下为document），而不是触发事件的元素。

来源

2016-08-11 16:13:55 Quentin

试试这个

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>

来源

2016-08-11 16:17:54

查找此元素内的文本

回答

相关问题