Question

我有两个div，如下：

 <div id="soil-trigger" 
                    onclick="getWidgetData('soil-trigger'); getWidgetSoilChart();"></div>

 <div id="water-trigger" 
                    onclick="getWidgetData('water-trigger'); getWidgetWaterChart();"></div>

单击一个div（即：soil-trigger / water-trigger）会在时间序列面板下生成一个图表。为此，我使用了以下JS：

 function getWidgetData(name){

        var curEl = document.getElementById('time-series');
        curEl.className = "active";

        var el7 = document.getElementById('system-series');
        var el8 = document.getElementById('cluster-series');

        var curE2 = document.getElementById('system-health');
        var curE3 = document.getElementById('cluster-info');

        curE2.className = "";
        curE3.className = "";

        el7.className = "hide";
        el8.className = "hide";

        widgetEl = document.getElementById("soil-chart");

        widgetEl5 = document.getElementById("water-chart");


        var el = document.getElementById('soil-chart');
        el.className = "";

        var el5 = document.getElementById('water-chart');
        el5.className = "";

        if(name == 'soil-trigger'){
         widgetEl.innerHTML = document.getElementById('soil-chart').outerHTML; 

            el.className = "show";
            el5.className = "hide";

              }

        if(name == 'water-trigger') {

        widgetEl5.innerHTML = document.getElementById('water-chart').outerHTML; 
    el5.className = "show";
        el.className = "hide";

                      }
}

我在这里提供的代码是这样的：当我点击土壤触发器时，它显示土壤数据的时间序列下的图表，但没有在系统序列和集群系列下显示任何内容。

同样，当我点击水触发时，它会在水数据的时间序列下显示图表，但不显示系统系列和群集系列下的任何内容。

当我点击土壤触发器时我真正需要的是它将在时间序列，系统序列和土壤数据的簇系列下显示三个不同的图表。再次，当我点击水触发时，它将在水数据的时间序列，系统序列和群集系列下显示三个不同的图表。

如何通过更改代码来实现这一目标。请帮忙。

由于

Answer 1

function getWidgetData(name) {
    var timeSeries = document.getElementById('time-series'),
        systemSeries = document.getElementById('system-series'),
        clusterSeries = document.getElementById('cluster-series'),
        systemHealth = document.getElementById('system-health'),
        clusterInfo = document.getElementById('cluster-info'),
        waterChart = document.getElementById("water-chart"),
        soilChart = document.getElementById('soil-chart');

    timeSeries.className = "active";
    systemHealth.className = "";
    clusterInfo.className = "";
    systemSeries.className = "hide";
    clusterSeries.className = "hide";
    soilChart.className = "";
    waterChart.className = "";

    if (name == 'soil-trigger') {
        soilChart.innerHTML =soilChart.outerHTML;
        soilChart.className = "show";
        waterChart.className = "hide";
    }

    if (name == 'water-trigger') {
        waterChart.innerHTML = waterChart.outerHTML;
        waterChart.className = "show";
        soilChart.className = "hide";
    }
}

您的代码可以像这样细分，快速重新分解并容易出错。也许你现在可以自己调试。

soilChart.innerHTML =soilChart.outerHTML;//??????????

如何使用javascript显示和隐藏嵌套的DIV

1 个答案: