Javascript Jquery：显示/隐藏python for循环创建的div

我试图在一个页面上显示一些动态生成的图形，然后隐藏它们，直到用户想要看到它们为止

我想要发生的是，当名为“Show_when_Closed”的div被单击时，隐藏该div并显示名为“Show_when_Open”和“Graph”的div，然后当单击“Show_when_Open”时，隐藏它并显示“Graph”和“Show_when_Closed”。for循环将运行X次，因此html代码将重复多次

我下面的代码不起作用，因为它使用Css标记，而不是动态ID，或者一些Jquery方式的代码知道要显示哪个div。我相信有一种简单的方法可以完成这项任务，但我的javascript非常糟糕

感谢所有帮助我的人

{% for value in graphs_to_render %}
  <div class='graph_holder' id=maindivs>
      <div class='graph_header_1' name='Show_When_Closed'> {{value}} <i class="fas fa-chevron-right"></i></div>
      <div class='graph_header_2' name='Show_When_Open' style='display:none;'> {{value}} <i class="fas fa-chevron-down"></i></div>
      <div name='Graph' class= 'graph_main' style='display:none;' >
       <embed type="image/svg+xml" src= {{graphs_to_render[value]|safe}} />
      </div>
    </input>
  </div>
{% endfor %}

<script>
$(document).ready(function() {
  $('.graph_header_1').on('click', function(){
    $('.graph_main').toggle();
    $('.graph_header_1').toggle();
    $('.graph_header_2').toggle();
  });
  $('.graph_header_2').on('click', function(){
    $('.graph_main').toggle();
    $('.graph_header_1').toggle();
    $('.graph_header_2').toggle();
  });
});

您可以使用

基本上应该是这样的：

$("div[name=Show_When_Closed]").on("click", function(){
  $("div[name=Show_When_Closed]").hide(); //hide the divs whose name are Show_When_Closed
  $("div[name=Show_When_Open]").show();  //show the divs whose name are Show_When_Open
});

---

下面是一个普通html的工作示例，但重要的部分是javascript

它会查看包含的父级，然后在上下文中查看将在打开div时显示适用show\u的父级

$document.readyfunction{ $[name=关闭时显示].clickfunction{ $this.parents.graph\u holder.find[name=Show\u When\u Open].Show； $this.hide； }; $[name=打开时显示].clickfunction{ $this.parents.graph\u holder.find[name=Show\u When\u Closed]。Show； $this.hide； }; }; {{value-graph_header_1} {{value-graph_header_2} {{value-graph_header_1} {{value-graph_header_2} {{value-graph_header_1} {{value-graph_header_2}

---

选择与单击的图元相关的图元

$document.readyfunction{ $'.graph_header_1、.graph_header_2'。单击，函数{ $this.parent.find'.graph\u main、.graph\u header\u 1、.graph\u header\u 2'。切换； }; }; 关闭时显示 打开时显示 图表 关闭时显示 打开时显示 图表

---

还有一些关于名称选择器的更多信息，如果该集合的迭代次数超过1次，则此选项无效。单击closed（关闭）将打开所有图形，而不仅仅是该graph holder组中关联的1个图形。您还可以使用toggleclass方法：然后您也可以使用css转换。谢谢，我假设它会这么简单。我真的应该去学点知识。