Question

更新

我将我的脚本更改为此功能。方式更简单，更有效。

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

我有这个脚本：

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

我用滑块控件控制。我正在做的是隐藏或显示一些div，具体取决于我从滑块中选择的内容。

这是我在尝试使用滑块隐藏或删除元素之前绘制数据的方式：

$(window).load(function() {

    $.getJSON('http://xxxxx/xxxxx.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;
    });
});

这一点很有效，直到有一点 - 一旦我到达最后一个元素（在这种情况下为90），它就不会出现。

Answer 1

使用css“display：none;”不是更容易吗？用于隐藏元素的功能。

.yourclass{
     display:none;
}

只需使用js编辑类

Link to CSS

Answer 2

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

用JS

2 个答案: