个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 03:11:34 24 4
gpt4 key购买 nike

我一直在尝试学习 js (和一点 jquery)，当我试图找到一种方法来组合我找到的解决方案时，我遇到了两个困难。

请注意，此代码是我最近完成的一些教程的混合体。我对 js 很陌生。

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

<body>  
<ol id="liste">
<li class="active">   
</li>
<li>      
</li>
<li>
</li>   
</ol>
<div id="main_ima">



</div>
<script src="js/main.js"></script>
</body>

我想为每个“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。完美。

现在我想在单击其中一个 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 += "<p>" + data[i].name + " is a " + data[i].species + ".</p>";                           

}                              


imaContainer.insertAdjacentHTML('beforeend', htmlS);

}

顺便说一句，我为 CSS 添加/删除“active”类。

因此，当我单击 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)。

希望我离一些可行的东西并没有太远，而且不像我的解决方案那么大。 :)

感谢您的宝贵时间，感谢所有帮助。

最佳答案

以下是一些建议:

  • 您无需将 id 属性分配给 li。实际上你永远不需要那个id。这也同样有效(另请注意选择器中的 >，这使得 find 调用变得不必要):

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

    现在您已经可以将每个 li 寻址为 $li[3]，尽管这不是“最佳实践”。更好的是 $li.get(3)。我还喜欢当变量是 jQuery 选择的结果时以 $ 开头的约定。它提供了一个线索，表明您可以对其应用 jQuery 方法。

  • 您无需分别为每个 li 分配点击处理程序。使用 jQuery on(而不是 native addEventListener)，您可以一次为所有这些事件分配一个事件处理程序。

    $li.on('click', apar)

  • 您为 on 定义的回调会将 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 可以使用简短的 $('#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 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="liste">
    <li class="active">load 1</li>
    <li>load 2</li>
    <li>load 3</li>   
</ol>
<div id="main_ima"></div>

关于javascript - 如何动态获取li中动态创建的ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45803627/

24 4 0
文章推荐： android-recyclerview - 尝试调用虚拟方法 'void android.support.v7.widget.RecyclerView.setLayoutManager
文章推荐： javascript - 是否可以在集合中找到没有相同字段的随机文档？ (monogdb\node.js)
文章推荐： python - Pyschools 质因数分解
文章推荐： javascript - 如何获取没有 id 的 iframe 内 div 类中的文本？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com