Question

我正在尝试获取 p 标签的文本，以将其更改为我点击的 li 的文本。但是，它总是更改为第一个。

JavaScript

$('li').click(function() {
    $('p').html($('li').html());
})

HTML

<p>text</p>
<ul id='ul'>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Answer 1

$('li').html()将获取第一个匹配的li元素的HTML。请改用this来指代单击的li。但是，由于您不是要插入HTML标记，而只是纯文本，因此使用.text方法更合适：

$('li').click(function() {
  $('p').text($(this).text());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>text</p>
<ul id='ul'>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

或者，如果您愿意的话，不需要像这样的简单的东西就包含一个像jQuery这样的大库：

const p = document.querySelector('p');
document.querySelector('#ul').onclick = ({ target }) => {
  p.textContent = target.textContent;
};

<p>text</p>
<ul id='ul'>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Answer 2

使用this来引用当前单击的li。另外，由于您尝试获取/设置文本内容，因此建议您使用text()而不是html()：

$('li').click(function() {
    $('p').text($(this).text());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>text</p>
<ul id='ul'>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Answer 3

欢迎使用StackOverflow！恭喜你第一个问题。

您希望this定位您单击的元素，而不是使用jQuery来查找li元素，如下所示：

$('li').click(function() {
    $('p').html($(this).html());
})

我在这里创建了一个小提琴：https://jsfiddle.net/o2gxgz9r/74708/

点击内容时获取内容的innerHTML

3 个答案: