javascript/jquery为每个列表项切换一个元素

我在javascript中执行for循环，以获取json文件中每个项目的标题和说明

for (var i = 0, len = mydata.texts.length; i < len; i++) {
    list +="<li>"+"<div class='circle'></div>" + 
         "<span onclick='toggleDesc()'>"+ mydata.texts[i]["keyword"] +
         "</span>"+
        +"</li>"+
        "<div id='descr'>"+mydata.texts[i]["description"]+"</div>";    
}


function toggleDesc() {
    var x = document.getElementById('descr');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

当前：
它只是切换第一个列表项

问题

---

如何修复它以在单击时显示每个列表项的描述？

您有多个id为

descr

的元素。ID应该是唯一的。考虑这样做：

for (var i = 0, len = mydata.texts.length; i < len; i++) {
    list +="<li>"+"<div class='circle'></div>" + 
         "<span onclick='toggleDesc(" + i + ")'>"+ mydata.texts[i]["keyword"] +
         "</span>"+
        "<div id='descr" + i + "'>"+mydata.texts[i]["description"]+"</div>"
        +"</li>";

当前： 它只是切换第一个列表项

因为一个页面中的多个元素不能使用相同的

id

，因为它必须是唯一的，如果使用它，只有第一个元素会被

document.getElementById（）

解析，所以只有第一个元素会被切换

解决方案：

使用

class

而不是

id

，以便可以将事件附加到具有该类的所有元素

在HTML代码中，通过

this

将对单击的

span

的引用传递给

toggleDescription（）

函数，并使用它在其中查找相关的

description

这是您的代码应该如何编写的：

for (var i = 0, len = mydata.texts.length; i < len; i++) {
    list +="<li>"+"<div class='circle'></div>" + 
         "<span onclick='toggleDesc(this)'>"+ mydata.texts[i]["keyword"] +
         "</span>"+
         "<div class='descr'>"+mydata.texts[i]["description"]+"</div>"; 
        +"</li>"
}


function toggleDesc(item) {
    $(item).next('.descr').toggle();
}

---

HTML中的标识符必须是唯一的。但是，您可以将CSS类与多个时间一起使用，这可以通过使用类选择器

.class

来确定

for (var i = 0, len = mydata.texts.length; i < len; i++) {
    list +="<li>"+"<div class='circle'></div>" + 
         "<span class='toggleDesc'>"+ mydata.texts[i]["keyword"] +
         "</span>"+
         "<div class='descr'>"+mydata.texts[i]["description"]+"</div>" +   
         "</li>";           
}

---

对动态生成的元素引用并使用方法和方法。您应该使用最近的静态容器来代替

文档

，以获得更好的性能。

您可以提供一个提琴吗？它仍然会呈现无效的HTML，因为

只能有

作为child@Satpal我懂了。不过这不是什么大问题，只要重新排列HTML，使

div

位于

li中即可。

它具有相反的效果：默认情况下显示描述，单击时它们会消失。默认情况下，它们应该隐藏。如何修复此问题？@jacky将css规则添加到类中，或使用

style=“display:none”

它具有相反的效果：默认情况下，它会显示描述，单击时它们会消失。默认情况下，它们应该隐藏。你怎么能解决这个问题？

for (var i = 0, len = mydata.texts.length; i < len; i++) {
    list +="<li>"+"<div class='circle'></div>" + 
         "<span onclick='toggleDesc(this)'>"+ mydata.texts[i]["keyword"] +
         "</span>"+
         "<div class='descr'>"+mydata.texts[i]["description"]+"</div>"; 
        +"</li>"
}


function toggleDesc(item) {
    $(item).next('.descr').toggle();
}

.descr{
    display:none;
}

for (var i = 0, len = mydata.texts.length; i < len; i++) {
    list +="<li>"+"<div class='circle'></div>" + 
         "<span class='toggleDesc'>"+ mydata.texts[i]["keyword"] +
         "</span>"+
         "<div class='descr'>"+mydata.texts[i]["description"]+"</div>" +   
         "</li>";           
}

$(document).on('click', '.toggleDesc', function(){
    $(this).next('.descr').toggle();
});