Question

编辑：我使用正确的图片和更新的代码编辑了帖子。

我有一个元素列表（在本例中为div，其中包含一些来自JSON的信息），我希望根据滑块控件的值显示或隐藏这些元素。

我正在尝试循环遍历元素列表并询问元素具有的样式，如果所述元素的ID与在silder中选择的值相同，那么我希望该元素被显示，所有其他隐藏的。这是我的脚本到目前为止：

            function myFunction(valor) {
        //alert("Has seleccionado "+valor);
                var elementos = document.getElementsByClassName("inner");
                alert ("Tienes " + elementos.length + " elementos.");
                var i;
                for (i = 1; i < elementos.length; i++) {                        
                    var sty = document.getElementById("age"+i); 
                    alert("age"+i);
                        if (getComputedStyle(sty).getPropertyValue("visibility") == "hidden") { 
                            document.getElementById("age"+valor).style.visibility = "visible";
                        } else {                            
                            document.getElementById("age"+i).style.visibility = "hidden";
                        }

                }
        }

这是我绘制列表的方式，BTW：

      $(window).load(function(){

    $.getJSON('http://xxxxxxxxx0/xxxxxx.json', function(data) {
    var output="<ul class='lista'><div class='outer'>";
    for (var i in data.lbclassic) {         
        output+="<div style='visibility:hidden;' class='inner'id="+"age" + data.lbclassic[i].ageinweeks+">"+"<p>" + data.lbclassic[i].ageinweeks + "--" + data.lbclassic[i].cumul + "--" + data.lbclassic[i].perhh+ "--" + data.lbclassic[i].perhd+ "--" + data.lbclassic[i].eggweightinweek+ "--" + data.lbclassic[i].eggmasscumul1+ "--" + data.lbclassic[i].eggmassinweek+ "--" + data.lbclassic[i].eggmasscumul+"</p></div>";
    }
    output+="</div></ul>";
    document.getElementById("placeholder").innerHTML=output;

}）;

此外，这是所述问题的图像;在我运行脚本之前，我将.elementos类应用于列表中的每个组件，因此它具有风格。但是，脚本将始终返回“NO tiene estilo”警报。

Answer 1

这就是我最终设法做到的：

            function myFunction(valor) {
        //alert("Has seleccionado "+valor);
                var elementos = document.getElementsByClassName("inner");
                var i;
                for (i = 1; i < elementos.length+1; i++) {
                        document.getElementById("age"+i).style.visibility = "hidden";
                }
                document.getElementById("age"+valor).style.visibility = "visible";
        }

将样式更改为li JS

1 个答案: