Question

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

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

以下我的代码不起作用，因为它使用Css标记，而不使用动态ID或某种知道显示哪个div的代码的Jquery方式。我敢肯定有一种简单的方法可以完成任务，但是我的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();
  });
});

Answer 1

选择相对于所单击元素的元素

$(document).ready(function() {
  $('.graph_header_1,.graph_header_2').on('click', function() {
    $(this).parent().find('.graph_main,.graph_header_1,.graph_header_2').toggle();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> Show_When_Closed<i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> Show_When_Open<i class="fas fa-chevron-down"></i></div>
  <div name='Graph' class='graph_main' style='display:none;'>
  Graph
    <embed type="image/svg+xml" src={ {graphs_to_render[value]|safe}} />
  </div>
</div>
<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> Show_When_Closed<i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> Show_When_Open<i class="fas fa-chevron-down"></i></div>
  <div name='Graph' class='graph_main' style='display:none;'>
  Graph
    <embed type="image/svg+xml" src={ {graphs_to_render[value]|safe}} />
  </div>
</div>

Answer 2

您可以使用attribute selector。

基本上应该看起来像这样：

.main{
  display:flex;
  display:-webkit-flex;
  -ms-display:-flex;
  height: 100vh;
  justify-content:center;
-webkit-justify-content:center;
-ms-justify-content:center;
}
.sub{
  display:flex;
  display:-webkit-flex;
  -ms-display:-flex;
align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
max-width:500px;
}

Answer 3

下面是纯html中的一个有效示例，但重要的部分是javascript。

它先查看包含的父对象，然后上下文相关地显示适用的Show_When_Open div。

$(document).ready(function() {
  $("[name=Show_When_Closed]").click(function(){
      $(this).parents(".graph_holder").find("[name=Show_When_Open]").show();
      $(this).hide();
  });
  
  $("[name=Show_When_Open]").click(function(){
      $(this).parents(".graph_holder").find("[name=Show_When_Closed]").show();
      $(this).hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> {{value - graph_header_1}} <i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> {{value - graph_header_2}} <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>

<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> {{value - graph_header_1}} <i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> {{value - graph_header_2}} <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>

<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> {{value - graph_header_1}} <i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> {{value - graph_header_2}} <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>

jQuery：显示/隐藏由python创建的Div循环

3 个答案: