보여 나는 다음과 같은 두 개의 div가이 자바 스크립트

Question

를 사용하여 중첩 된 div 숨기는 방법 :

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

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

하나 개의 사업부에서 클릭 (즉 토양 트리거/물 트리거) 시계열 패널에서 차트를 생성합니다. 이 일을 위해 나는 때라도 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;//??????????