用 6 个不同的按钮显示 6 个不同的图表 - Javascript

Question

我对整个 javascript 编程（第一个项目）很陌生。所以我有一个使用 CSS 和 javascript 的 PHP 页面。有 6 个按钮可以在 6 个不同的图表上解除掩码（类）。按钮 1 ---> 显示图表 1 按钮 2 ---> 显示图表 2 等等。如果已经显示了一个图形并打开了另一个图形，则第一个图形必须再次变为不可见。

所以我一整天都做了一些研究，并想出了一种通过一些功能实现这一目标的方法

function choosegraph(){

    var sens1 = document.getElementById ('ButtonSens1');

    sens1.addEventListener ('click', Sensor1Graph, true);

    var sens2 = document.getElementById ('ButtonSens2');

    sens2.addEventListener ('click', Sensor2Graph, true);

    var sens3 = document.getElementById ('ButtonSens3');

    sens3.addEventListener ('click', Sensor3Graph, true);

    var sens4 = document.getElementById ('ButtonSens4');

    sens4.addEventListener ('click', meldung, true);

    var sens5 = document.getElementById ('ButtonSens5');

    sens5.addEventListener ('click', meldung, true);

    var sens6 = document.getElementById ('ButtonSens6');

    sens6.addEventListener ('click', meldung, true);

}

function Sensor1Graph(){

    var element = document.getElementById("lineDia1");

        element.classList.toggle("invisible");

    var element = document.getElementById("lineDia2");

        element.classList.add("invisible");

    var element = document.getElementById("lineDia3");

        element.classList.add("invisible");

    var element = document.getElementById("lineDia4");

        element.classList.add("invisible");

    var element = document.getElementById("lineDia5");

        element.classList.add("invisible");        

    var element = document.getElementById("lineDia6");

        element.classList.add("invisible");        

}

所以这是有效的。但我想有一种更简单、更快捷的方法来执行此操作。如果有人能给我一些改进这个程序的建议，那就太好了。

Answer 1

我看到您的 HTML 代码是重复的。我们可以动态生成它。运行以下代码段：var elements=[];for(let i=1;i<=6;i++){&nbsp;let ele=document.createElement("article");&nbsp;ele.classList.add("invisible");&nbsp;ele.id=`lineDia${i}`&nbsp;let section=document.createElement("section");&nbsp;section.class="tachos"&nbsp;let div=document.createElement(`curve_chart${i}`);&nbsp;div.style.width="750px";&nbsp;div.innerHTML=`graph${i}`&nbsp;section.innerHTML=div.outerHTML;&nbsp;ele.innerHTML=section.outerHTML;&nbsp;let btn=document.createElement('button');&nbsp;btn.id=`buttonSense${i}`;&nbsp;btn.onclick=function(){&nbsp; &nbsp;sensorGraph(i)&nbsp;}&nbsp;btn.innerHTML=`Show graph${i}`;&nbsp;document.getElementById("main").appendChild(ele);&nbsp;document.getElementById("buttons-div").appendChild(btn);&nbsp;elements.push(ele);}function sensorGraph(i){&nbsp; &nbsp; elements.forEach((element,index)=>{&nbsp; &nbsp; &nbsp; &nbsp; if(i-1 == index)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;element.classList.toggle("invisible");&nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;element.classList.add("invisible");&nbsp; &nbsp; });}.invisible{&nbsp;visibility:hidden;}#buttons-div{display:inline-flex;}.as-console-wrapper { max-height: 100% !important; top: 0; }<div id="main"></div><div id="buttons-div"></div>