使用纯JS点击即可从li元素中获取文本和id

Get text and id from an li element on click with pure JS

本文关键字：元素 li 获取 取文本 id JS      更新时间：2023-09-26

我已经被这个问题困扰了好几天，我无法解决它。

我用jQuery做了这件事，没有问题，但我需要纯JS。

我的列表就是这样生成的。

function get_friends(items){

if(items != undefined){
    if (items.length != 0){
        var html_friends_list = "";
        for(var count = 0; count < items.length; count++){
            if(items[count].subscription == "both"){
                var display_name = Strophe.getNodeFromJid(items[count].jid);
                html_friends_list = html_friends_list + "<li style='font-size:19px' id='open_chat-" + items[count].jid + "'>" + "<a href='chat-js/index.html'>" + display_name + "<span class='block-list-label' id='" + items[count].jid  + "_unread_messages" + "'>0</span><span class='block-list-label' id='" + items[count].jid  + "_change_status" + "'></span></a></li>";
             }
        }
        document.getElementById("friends-list").innerHTML = html_friends_list;

如前所述，我想保存文本的值和单击的任何li元素的id。

问候

您尚未指定这是针对特定列表还是仅针对页面上的任何li。下面将记录页面上任何li的id和innerHTML组件。也许您可能需要针对您的特定用例更新querySelector。

var list = document.querySelectorAll('li');
Array.prototype.slice.call(list).forEach(function(listItem){
  listItem.addEventListener('click', function(e){
    console.log(this.id);
    console.log(this.innerHTML);
  });
});

这里有一个JSFiddle，我认为它展示了你正在努力实现的目标。

Jsfidle

结合詹姆斯的回答和工作实例。

function get_friends(items) {
    if (items != undefined) {
        if (items.length != 0) {
            var html_friends_list = "<ul>";
            for (var count = 0; count < items.length; count++) {
                if (items[count].subscription == "both") {
                    html_friends_list = html_friends_list + "<li id='open_chat-" + items[count].jid + "'>"+ items[count].display_name +"</li>";
                }
            }
                        html_friends_list = html_friends_list + '</ul>'
            document.getElementById("friends-list").innerHTML = html_friends_list;
        }
    }
}

注意：您应该在创建dom元素后触发prototype。

相关文章：