如何在li中动态获取动态创建的ID

我一直在努力学习js（以及一点点jquery），当我试图找到一种方法来组合我找到的解决方案时，我遇到了两个困难。

只是一点警告，这段代码是我最近完成的一些教程的混合。 我对js很新。

所以我从一个带有几个li的基本html开始。

我想为每个“li”创建id，所以在我的main.js中我添加了这个：

 var idVar = $("#liste").find("li").each(function(index){ $(this).attr("id","num-li-"+index); }); 

到目前为止这很有效。 每次我添加一个新的li，它都会获得一个新的id。 我也将它放入var中，因为我稍后需要使用它。

在控制台中，如果我输入idVar，它会给我整个li列表。 如果我输入idVar [3]。 它只给了我与[3]相关联的李。 完善。

现在我希望在点击其中一个li时显示一些内容。 例如，我将使用[3]。 所以我把它添加到我的main.js

 var imaContainer = document.getElementById('main_ima') var listed = document.getElementById('liste'); idVar[3].addEventListener("click", appar); function appar(){ $(idVar[3]).addClass("active").siblings().removeClass("active"); var imaSel = new XMLHttpRequest(); imaSel.open('GET', 'https://domain.link.to.file.json'); imaSel.onload = function() { var imaLo = JSON.parse(imaSel.responseText); renderHTML(imaLo); }; imaSel.send(); }; function renderHTML(data) { var htmlS = ""; for (i = 0; i < data.length; i++) { htmlS += "
" + data[i].name + " is a " + data[i].species + ".
"; } imaContainer.insertAdjacentHTML('beforeend', htmlS); } 

只是旁注，我添加了CSS的添加/删除“活动”类。

因此，当我点击li [3]时，它几乎按预期工作。 唯一的事情就是当我重新点击[3]时它会产生第二次结果。 再次，如果我第三次点击它，它会第三次产生结果，而不会删除过去的结果。 （这不完全是我想要的。只是第一个结果会更好。）

但这不是我面临的主要问题。

我希望根据点击的li的id动态检测[number]。 我可以用一种非常难看的方式复制并通过我的每个[数字]的代码。 它会起作用。 但是，如果我想添加更多的li元素，我需要添加更多的上述代码的复制和粘贴，给我可能的大量文件。 这肯定不是最好的方法，虽然它会起作用。

我确信这可以动态完成..但这主要是我在这里的原因。 🙂

之后，一旦将动态添加到点击的li中，我还希望根据li id动态更改链接。 例如，而不是：

 imaSel.open('GET', 'https://domain.link.to.file.json'); 

就像是：

 imaSel.open('GET', "https://domain.link.to.file" + var +".json"); 

var等于点击的li的[3]个数。

在这种情况下，当我尝试添加一个带有for循环的var时，我总是得到“var = max.length”而不是“var = [被点击项目的id]”。

所以你有它。 你需要更多细节吗？

这是我的第一个JS和/或Jquery尝试。 我已经玩了几天但是当我搜索答案时，当我实施“解决方案”时，它给了我一些新问题。 所以我向你展示了与我正在寻找的最接近的IMO代码。

希望，我并没有太远离某些有用的东西，也不像我的解决方案那么大。 🙂

感谢您的时间，所有的帮助表示赞赏。

Answer 1

以下是一些建议：

• 您不需要为li分配id属性。 你实际上从来不需要那个id 。 这也可以正常工作（请注意选择器中的> ，这使得不需要find调用）：

   var $li = $("#liste > li"); 

  现在你已经可以将每个li称为$li[3] ，尽管这不是“最佳实践”。 更好的是$li.get(3) 。 我也喜欢使用$来启动变量的约定，因为它是jQuery选择的结果。 它提供了一个线索，您可以将jQuery方法应用于它。

• 您不需要单独为每个li分配一个单击处理程序。 使用jQuery（而不是本机addEventListener ），您可以一次为所有这些事件分配一个事件处理程序。

   $li.on('click', apar) 

• 您为其定义的回调this设置为已单击的特定li元素，因此您可以执行以下操作：

   $(this).addClass("active").siblings().removeClass("active"); 

  …没有任何数组查找。

• jQuery为几种类型的HTTP请求提供简单的函数，因此您不需要使用XMLHttpRequest 。 事实上，有一个专门用于获取JSON，因此您甚至不必解析响应：

   $.getJSON('https://domain.link.to.file.json', renderHTML); 

• jQuery index()方法可以为您提供该li的序列号：

   $.getJSON('https://domain.link.to.file' + $(this).index() + '.json', renderHTML); 

• 要替换某个元素的内部HTML，可以使用jQuery html方法：

   $('#main_ima').html(htmlS); 

  另请注意，您不需要DOM本机getElementById方法，jQuery可以使用short $('#main_ima') 。

例

这是一个假的JSON服务器的工作示例：

 $("#liste > li").on('click', apar); function apar() { $(this).addClass("active").siblings().removeClass("active"); $.getJSON('https://jsonplaceholder.typicode.com/posts/' + (1+$(this).index()), renderHTML); } function renderHTML(data) { // This particular JSON request returns an object with body property var htmlS = data.body; $('#main_ima').html(htmlS); } // On page load, click on the first `li` to automatically load the data for it $('#liste > li:first').click(); 

 #liste { width: 40px } .active { background: yellow } 

  
 
load 1
 
load 2
 
load 3
 
 
 

Answer 2

以下是您主要关注的问题，如何使用jquery动态获取ID：

 $('.listen-to-me').click(function() { //Add event listener to class var elementId = $(this).attr('id'); //Get the 'id' attribute of the element clicked var idNumber = elementId.substring(elementId.indexOf("-") +1); //Get the index of the "-" in the string, and then cut everything prior alert(idNumber); //The final result }); 

  
 
1
 
2
 
3
 
4
 
5