ul li $（this）.text（）不顯示任何內容

Question

解決了！ 實際上問題出在$（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();
});

我可以知道為什么它不起作用嗎？

謝謝！

Answer 1

獲取內部錨標簽的文本。 這就是帶有文本的元素。

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

Answer 2

使用Jquery：

的jsfiddle

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

Answer 3

您應該嘗試限制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') 。