我对整个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");
}
function Sensor2Graph(){
var element = document.getElementById("lineDia1");
element.classList.add("invisible");
var element = document.getElementById("lineDia2");
element.classList.toggle("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");
function Sensor3Graph(){ ... }
function Sensor4Graph(){ ... }
function Sensor5Graph(){ ... }
function Sensor6Graph(){ ... }
所以这有效。但是我想有一种更简便快捷的方法来执行此操作。如果有人可以给我一些改进程序的提示，那就太好了。
谢谢
编辑：
显示了3个图形的一些HTML代码
<!-- Line Graphs -->
<article class="test invisible" id="lineDia1">
<section class="tachos">
<div id="curve_chart1" style="width: 715px" ></div>
</section>
</article>
<article class="test invisible" id="lineDia2">
<section class="tachos">
<div id="curve_chart2" style="width: 715px" ></div>
</section>
</article>
<article class="test invisible" id="lineDia3">
<section class="tachos">
<div id="curve_chart3" style="width: 715px" ></div>
</section>
</article>
class -test是整个视觉类（是的，仍然不是最终的）class -invisible是掩码（显示：无；）
<body onload="showSensor()">
“ choosegraph”在“ showSensor”函数中调用
我看到您的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>