Question

我一直在努力学习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>

我想为每个＆＃34; li＆＃34;创建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 += "<p>" + data[i].name + " is a " + data[i].species + ".</p>";                           

}                              


imaContainer.insertAdjacentHTML('beforeend', htmlS);

}

只是旁注，我添加了添加/删除＆＃34;有效＆＃34; 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时，我总是得到＆＃34; var = max.length＆＃34;而不是＆＃34; var = [点击项目的ID]＆＃34;。

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

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

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

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

Answer 1

以下是一些建议：

您无需为id分配li个属性。你实际上从来不需要id。这也可以正常工作（请注意选择器中>使find调用不必要）：
```
var $li = $("#liste > li");
```
现在您已经可以将li作为$li[3]处理，但这不是“最佳做法”。更好的是$li.get(3)。我也喜欢使用$来启动变量的约定，因为它是jQuery选择的结果。它提供了一个线索，您可以将jQuery方法应用于它。
您无需单独为每个li分配点击处理程序。使用jQuery on（而不是本地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>

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
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="test-1" class="listen-to-me">1</li>
  <li id="test-2" class="listen-to-me">2</li>
  <li id="test-3" class="listen-to-me">3</li>
  <li id="test-4" class="listen-to-me">4</li>
  <li id="test-5" class="listen-to-me">5</li>
</ul>

如何在li

2 个答案:

实施例