如何獲取嵌套在無序列表中的生成錨標記的文本？

Question

我有一個腳本可以生成字母表並水平列出它們。 我想要做的是單擊無序列表中的一個字母並將其填充到文本框中。

HTML

<input id="letter" type="text" />
<ul id="test"></ul>

jQuery

$(document).ready(function(){
    for (var i = 65; i <= 90; i++) {
        $('#test').append('<li><a href="#">' + String.fromCharCode(i) + '</a></li>');
    }
});
var li = $(this).parent();
$(this).click(function(){
var clickedLetter = li.siblings().find('a.active').text();
$("#letter").val(clickedLetter);
});

這是一個代碼筆。 我哪里錯了？

Answer 1

'this'是指window object，它不會給你參考li。

var li = $(this).parent();

您沒有將活動 class 分配給“a”

var clickedLetter = li.siblings().find('a.active').text();

試試這個代碼：

 $(document).ready(function () { for (var i = 65; i <= 90; i++) { $("#test").append( '<li><a href="#">' + String.fromCharCode(i) + "</a></li>" ); } $("#test li").on("click", function (event) { var clickedLetter = $(this).find('a').text(); $("#letter").val(clickedLetter); }); });

 ul#test li{ display:inline; margin-right:.40em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="letter" type="text" /> <ul id="test"></ul>

Answer 2

您可以通過 jQuery 添加一個事件並使用事件委托

 $(document).ready(function() { const ul = $("#test"); const input = $("#letter"); for (var i = 65; i <= 90; i++) { ul.append( '<li><a href="#">' + String.fromCharCode(i) + "</a></li>" ); } ul.on("click", "a", function (evt) { evt.preventDefault(); input.val(this.textContent); // input.val($(this).text()); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="letter" type="text" /> <ul id="test"></ul>