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中的每个元素都有一个表），但只有一次。

为此，我正在实现一个带滑块控件的功能，用于显示或隐藏表格。

这是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将显示所有元素，但从不隐藏它，第二个将把它们全部放在彼此之上，不知道我在哪里失败。

Answer 1

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

Answer 2

我找到了罪魁祸首，我从数字值得到了长度。这是更新后的功能。

<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+1; i++) {
                                document.getElementById("age"+i).style.display = "none";
                        }                           
                document.getElementById("age"+valor).style.display = "block";   
        }

JS函数隐藏或显示元素

2 个答案: