function myFunction() {
const currentChart = document.querySelector("#display .active-chart");
if (currentChart) {
currentChart.classList.remove("active-chart"); // Remove the active-chart class
currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
}
var chartType = document.getElementById("chartType");
var i = chartType.selectedIndex;
if (chartType.options[i]) {
lineChart.style.display = "inherit";
}
}
2-所选选项文本上的切换大小写:
在HTMLElement.text变量上,这是一个非常简单的switch:
function myFunction() {
const currentChart = document.querySelector("#display .active-chart");
if (currentChart) {
currentChart.classList.remove("active-chart"); // Remove the active-chart class
currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
}
var chartType = document.getElementById("chartType");
var i = chartType.selectedIndex;
const selectedOption = chartType.options[i]; // The option the user has clicked on
let toEnableChart;
switch (selectedOption.text) {
case 'Population':
toEnableChart = lineChart;
break;
case 'Precipitation':
toEnableChart = barChart;
break;
case 'Ethnicity':
toEnableChart = pieChart;
break;
case 'Activity':
toEnableChart = radarChart;
break;
}
if (chartType.options[i]) {
lineChart.style.display = "inherit";
}
}
function myFunction() {
const currentChart = document.querySelector("#display .active-chart");
if (currentChart) {
currentChart.classList.remove("active-chart"); // Remove the active-chart class
currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
}
var chartType = document.getElementById("chartType");
var i = chartType.selectedIndex;
const selectedOption = chartType.options[i]; // The option the user has clicked on
let toEnableChart;
switch (selectedOption.text) {
case 'Population':
toEnableChart = lineChart;
break;
case 'Precipitation':
toEnableChart = barChart;
break;
case 'Ethnicity':
toEnableChart = pieChart;
break;
case 'Activity':
toEnableChart = radarChart;
break;
}
if (toEnableChart) {
toEnableChart.classList.remove("hidden-chart");
toEnableChart.classList.add("active-chart");
}
1条答案
按热度按时间cczfrluj1#
以下是我的评论:
1-隐藏之前显示的图表
要做到这一点,您需要做两件事:查找当前显示的图表,并隐藏它。
让我们先添加两个类:
hidden-chart
和active-chart
及其CSS:并相应地编辑HTML:
好的,现在你可以有两种图表:具有
hidden-chart
类的隐藏图表和具有active-chart
类的当前显示的图表。为了实现1),您现在必须将以下代码添加到您的函数:
2-所选选项文本上的切换大小写:
在HTMLElement.text变量上,这是一个非常简单的
switch
:您可以使用标准的if else if else if else构造来替换该开关。
3-启用新图表
现在我们知道了要显示什么图表(
toEnableChart
变量,多亏了开关;并且我们知道如何显示它-还记得我们的隐藏图表和活动图表类吗?),现在是时候显示它了!正如您可能注意到的,显示新图表是步骤#1,但向后。
如果有什么不清楚的地方,请随时发表评论。