ul li $(this）.text(） 什么也没显示

ul li $(this).text() shows nothing

本文关键字：显示 什么 text li this ul      更新时间：2023-09-26

已解决！ 实际上问题出在 $（document）.ready（function（）{//}）; 我使用它后，它工作正常。 感谢您的帮助，并因为这种愚蠢的错误而感到抱歉。

我正在尝试从引导下拉菜单中选择 li。它有效，但是当我想获取所选 li 的文本时，它什么也没显示。

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        <font id="dropdownMenu" >inch</font>
        <span class="caret"></span>
    </a>
    <ul id="dropdownList" class="dropdown-menu">
        <li><a href="#">inch</a></li>
        <li><a href="#">cm</a></li>
        <li><a href="#">mm</a></li>
    </ul>
</div>

.js：

$('#dropdownList li').click(function () {
    console.log($(this).text());
    document.getElementById('dropdownMenu').innerHTML = $(this).text();
});

我可以知道为什么它不起作用吗？

谢谢！

使用 Jquery：

JSFiddle

$('#dropdownList li').click(function () {
    console.log($(this).text());
    $('#dropdownMenu').text($(this).text());
});
你应该

尝试限制DOM的读/写，比如使用.find()和.text()等。我会在标记中添加一些数据

.HTML：

<ul id="dropdownList" class="dropdown-menu">
  <li data-value="inch"><a href="#">inch</a></li>
  <li data-value="cm"><a href="#">cm</a></li>
  <li data-value="mm"><a href="#">mm</a></li>
</ul>

.JS：

$('#dropdownList li').click(function () {
  console.log($(this).data('value'))
})

工作演示

两件事：

  • data-*是有效的 HTML5 标记，可用于满足自己的需求。
  • 不要为每次点击重新读取 DOM，var dropdownValue = $('#value') .

获取内部锚标记的文本。这是带有文本的元素。

$('#dropdownList li').click(function () {
    console.log($(this).find('a').text());
    document.getElementById('dropdownMenu').innerHTML = $(this).find('a').text();
});
相关文章：