js脚本不再显示图表

Question

我制作了 3 个图表和 js 脚本，该脚本显示和隐藏这些图表，当页面加载时，图表 1 打开，当我将图表切换到图表 2 时，图表 1 隐藏，图表 2 显示，再次当我将图表切换到图表 3，图表 2 隐藏，图表 3 显示正常，但是当我想返回图表 1 时，我点击按钮没有任何反应，按钮被标记为活动，但图表没有显示，但是例如，当我想再次将 chart3 切换到 chart2 时，它的工作正常...我犯错的地方，请帮助！

var div_elements = document.querySelectorAll(".skills-h #skills");
var item_elements = document.querySelectorAll(".chart");
for (var i = 0; i < div_elements.length; i++) {
  div_elements[i].addEventListener("click", function() {
    div_elements.forEach(function(div) {
      div.classList.remove("active");
    });
    this.classList.add("active");
    var div_value = this.getAttribute("data-chartType");
    item_elements.forEach(function(item) {
      item.style.display = "none";
    });
    if (div_value == "a") {
      document.querySelector("." + div_value).style.display = "block";
    } else if (div_value == "b") {
      document.querySelector("." + div_value).style.display = "block";
    } else if (div_value == "it") {
      document.querySelector("." + div_value).style.display = "block";
    } else {
      console.log("");
    }
  });
}

<div class="skills-h">
  <div id="skills" data-chartType="a" class="active">a</div>
  <div id="skills" data-chartType="b">b</div>
  <div id="skills" data-chartType="it">it</div>
</div>
<div class="charts">
  <canvas class="chart a" id="myChart1" width="400" height="100"></canvas>
  <canvas class="chart b" style="display: none;" id="myChart2" width="400" height="100"></canvas>
  <canvas class="chart it" style="display: none;" id="myChart3" width="400" height="100"></canvas>
</div>

Answer 1

您应该避免重复的元素 ID。这是给你的 solution。

<div class="skills-h">
  <div id="skills1" data-chartType="a" class="skill active">a</div>
  <div id="skills2" data-chartType="b" class="skill">b</div>
  <div id="skills3" data-chartType="it" class="skill">it</div>
</div>
<div class="charts">
  <canvas class="chart a" id="myChart1" width="400" height="100" style="background: white;"></canvas>
  <canvas class="chart b" style="display: none; background: red;" id="myChart2" width="400" height="100"></canvas>
  <canvas class="chart it" style="display: none; background: blue;" id="myChart3" width="400" height="100"></canvas>
</div>

var div_elements = document.querySelectorAll(".skill");
var item_elements = document.querySelectorAll(".chart");
for (var i = 0; i < div_elements.length; i++) {
  div_elements[i].addEventListener("click", function() {
    div_elements.forEach(function(div) {
      div.classList.remove("active");
    });
    this.classList.add("active");
    var div_value = this.getAttribute("data-chartType");
    item_elements.forEach(function(item) {
      item.style.display = "none";
    });
    if (div_value == "a") {
      document.querySelector("." + div_value).style.display = "block";
    } else if (div_value == "b") {
      document.querySelector("." + div_value).style.display = "block";
    } else if (div_value == "it") {
      document.querySelector("." + div_value).style.display = "block";
    } else {
      console.log("");
    }
  });
};

使用相同的 class 名称而不是相同的元素 ID。希望这个回答对您有所帮助。

js脚本不再显示图表

js script not showing chart again

html

javascript

script