时间戳

首页 > 解决方案 > 单击时获取内容的innerHTML

javascript - 单击时获取内容的innerHTML

问题描述

我试图让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>

标签： javascripthtml

解决方案

$('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>

推荐阅读