javascript - 将样式更改为 li JS

Question

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

我有一个元素列表(在本例中是包含来自 JSON 的一些信息的 div)，我想根据 slider 控件的值显示或隐藏这些元素。

我正在尝试遍历元素列表并询问元素具有的样式，如果所述元素的 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";
                        }

                }
        }

这就是我绘制列表的方式，顺便说一句:

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