Я довольно новичок во всем javascript программировании (первый проект). Итак, у меня есть страница PHP, работающая с CSS и javascript. Есть 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(){ ... }
Так что это работает. Но я думаю, что есть способ проще и быстрее сделать это. И было бы неплохо, если бы кто-нибудь мог дать мне несколько советов по улучшению этой программы.
спасибо
РЕДАКТИРОВАТЬ:
некоторый HTML код из 3 отображаемых графиков
<!-- 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 - это маска (display: none;)
<body onload="showSensor()">
«выбор графика» вызывается из функция "showSensor"