javascript - 隐藏或显示元素的 JS 函数

Question

我必须 JSON 文件，我将它们加载到两个表中，如下所示:

      $(window).load(function(){    
        $.getJSON('http://1xxxxxx/xxxxx_1_18.json', function(data) {
        var output="<div class='outer'>";
        for (var i in data.lbclassic118) {          
            output+="<div style='visibility:hidden;' class='lbclassic118'id="+"age" + data.lbclassic118[i].ageinweeks+">"+ '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks)'+ data.lbclassic118[i].ageinweeks+'</strong></center></th></tr><tr><td rowspan="3">Body Weight (g)</td><td>average</td><td><strong>'+ data.lbclassic118[i].average+'</strong></td></tr><tr><td>range min</td><td><strong>'+ data.lbclassic118[i].rangemin+'</strong></td></tr><tr><td>range mmax</td><td><strong>'+ data.lbclassic118[i].rangemmax+'</strong></td></tr><tr><td rowspan="3">feed sonsumption</td><td>kj bird day</td><td><strong>'+ data.lbclassic118[i].kjbirdday+'</strong></td></tr><tr><td>g bird day</td><td><strong>'+ data.lbclassic118[i].gbirdday+'</strong></td></tr><tr><td>cumulative</td><td><strong>'+ data.lbclassic118[i].cumulative+'</strong></td></tr></table>' +"</div>";
        }
        output+="</div>";
        document.getElementById("placeholder1").innerHTML=output;
        });
  });   


  $(window).load(function(){    
        $.getJSON('http://xxxxxx/xxxxxx.json', function(data) {
        var output="<div class='outer'>";
        for (var i in data.lbclassic1990) {         
            output+="<div style='visibility:hidden;' class='lbclassic1990'id="+"age" + data.lbclassic1990[i].ageinweeks+">"+ '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks) '+ data.lbclassic1990[i].ageinweeks+'</strong></center></th></tr><tr><td>Egg No. per H.H.</td><td>cumul.</td><td><strong>'+data.lbclassic1990[i].cumul+'</strong></td></tr><tr><td rowspan="2">Rate of Lay %</td><td>per H.H.</td><td><strong>'+data.lbclassic1990[i].perhh+'</strong></td></tr><tr><td>per H.D.</td><td><strong>'+data.lbclassic1990[i].perhd+'</strong></td></tr><tr><td rowspan="2"> Egg Weight (g)</td><td>egg weight in week</td><td><strong>'+data.lbclassic1990[i].eggweightinweek+'</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>'+data.lbclassic1990[i].eggmasscumul+'</strong></td></tr><tr><td rowspan="2">Egg Mass -- g/H.D. -- kg/H.H.</td><td>egg mass in week</td><td><strong>'+data.lbclassic1990[i].eggmassinweek+'</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>'+data.lbclassic1990[i].eggmasscumul2+'</strong></td></tr></table>' +"</div>";
        }
        output+="</div>";
        document.getElementById("placeholder2").innerHTML=output;
        });
  });

信息按其应有的方式出现，我对此没有任何问题。 但是，我想做的只是一次显示一个表，而不是同时显示所有表(不希望 JSON 中的每个元素都显示一个表)，而是一次只显示一个表。

为此，我正在实现一个带有 slider 控件的功能，该功能将显示或隐藏表格。

这是 HTML 输出数据结构的图像:

现在，我想要的是使用此脚本隐藏或显示不同的 DIV(表):

<script>
        function leslider(valor) {
            var elementos_lbclassic118 = document.getElementsByClassName("lbclassic118");
            var elementos_lbclassic1990 = document.getElementsByClassName("lbclassic1990");
            var total_elementos = elementos_lbclassic118.length + elementos_lbclassic1990.length;
                        var i;
                        for (i = 1; i < total_elementos.length+1; i++) {
                                document.getElementById("age"+i).style.visibility = "hidden";
                        }
                document.getElementById("age"+valor).style.visibility = "visible";  
        }

但是它不起作用，第一个 JSON 将显示所有元素但从不隐藏它，第二个 JSON 会将它们全部放在彼此之上，不确定我在哪里失败。

Answer 1

我猜你错了“leslider”功能。 如何使用“leslider”这个功能，我来看看这段代码。