Question

每次单击相应的Title-1时，我需要获取文本Title-2或<li>。以下是我的尝试无效。

<ul id="playlist">
<a onclick="loadSong(); get_text();"><li>Tilte-1</li></a>
<a onclick="loadSong(); get_text();"><li>Title-2</li></a>
</ul>

我该如何实现？

Answer 1

通过将this传递给get_text(this)函数来传递当前元素：

// Mocking this function.
function loadSong() {
  // Stuff
}

// Add a parameter which.
function get_text(which) {
  // Use which.innerHTML to access the content.
  console.log(which.innerHTML.trim());
}

<ul id="playlist">
  <li><a onclick="loadSong(); get_text(this);">Tilte-1</a></li>
  <li><a onclick="loadSong(); get_text(this);">Title-2</a></li>
</ul>

注意：您应该将<li>作为<ul>而不是<a>的直接后代。我为您更改了。

注意：另一种更好的方法是使用HTML5数据属性在<a>上传递内容。像这样：

<a data-title="Hello World">

在使用textContent之前，请阅读：kelly norton: innerText vs. textContent

Answer 2

最简单的方法是：

<ul id="playlist">
    <a href="#" onclick="loadSong(); get_text(this)"><li>Tilte-1</li></a>
    <a href="#" onclick="loadSong(); get_text(this)"><li>Title-2</li></a>
</ul>

function loadSong() {
    console.log('song');
}

function get_text(e) {
    console.log(e.innerText);
}

Answer 3

另一种好的方法是仅在JavaScript中执行JavaScript逻辑。

var playlist = document.getElementById("playlist");
var playlist_items = playlist.children;

for (var i = 0; i < playlist_items.length; i++) {
	playlist_items[i].onclick = function() {
  	    console.log(this.children[0].innerText);
  	}
}

<ul id="playlist">
<a><li>Tilte-1</li></a>
<a><li>Title-2</li></a>
</ul>

Answer 4

您可以使用事件委托来做类似的事情：

function clickHandler(e) {
  console.log(e.target.textContent);
}

document.querySelector('ul').addEventListener('click', clickHandler);

<ul id="playlist">
  <li>Tilte-1</li>
  <li>Title-2</li>
</ul>

Answer 5

<ul id="playlist">
  <li><a onclick="loadSong(); get_text(this);">Tilte-1</a></li>
  <li><a onclick="loadSong(); get_text(this);">Title-2</a></li>
</ul>

<p id="demo"></p>

<script>
function get_text(which) {
   var x = document.title;
  document.getElementById("demo").innerHTML = x;
}
</script>

类似的东西

如何获得列表项单击上的文本？

5 个答案: