用 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++){

 let ele=document.createElement("article");

 ele.classList.add("invisible");

 ele.id=`lineDia${i}`

 let section=document.createElement("section");

 section.class="tachos"

 let div=document.createElement(`curve_chart${i}`);

 div.style.width="750px";

 div.innerHTML=`graph${i}`

 section.innerHTML=div.outerHTML;

 ele.innerHTML=section.outerHTML;

 let btn=document.createElement('button');

 btn.id=`buttonSense${i}`;

 btn.onclick=function(){

   sensorGraph(i)

 }

 btn.innerHTML=`Show graph${i}`;

 document.getElementById("main").appendChild(ele);

 document.getElementById("buttons-div").appendChild(btn);

 elements.push(ele);

}

function sensorGraph(i){

    elements.forEach((element,index)=>{

        if(i-1 == index)

         element.classList.toggle("invisible");

        else

         element.classList.add("invisible");

    });

}

.invisible{

 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>