查找此元素內的文本

我正在尋找一個相當簡單的操作：您點擊一個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

查找此元素內的文本

回答

相關問題