Question

我在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';
    }
}

结果如下：

1. Title1
   description1
2. title2
   description2
3. Title3
   Description3
...

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

问题

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

Answer 1

您有多个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>";

;
}

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

Answer 2

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

注意：我已将 descr 作为SPAN的兄弟，因为<ul> / <ol>只能LI作为孩子

我还建议使用不显眼的事件处理程序，而不是使用丑陋的内联事件处理程序。

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

引用.next()并使用.on()方法和Event Delegation方法生成动态生成的元素。并且代替document，您应该使用最接近的静态容器以获得更好的性能。

Answer 3

<强>目前：它只是切换第一个列表项。

因为您不能在页面中使用同一个id多个元素，因为它必须是唯一的，如果您使用它，则只会使用document.getElementById()解析第一个元素，这就是为什么第一个是切换。

<强>解决方案：

使用class代替id，以便您可以将事件附加到具有此类的所有元素。

在您的HTML代码中，将带有span的已点击this的引用传递给您的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();
}

并确保将description div放在li elemnt中，因为列表只能包含li作为直接子项。

编辑：

默认情况下需要隐藏css规范：

.descr{
    display:none;
}

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

问题

3 个答案:

编辑：