javascript - 如何在 django 模板中切换跨度时切换字形图标

Question

我在 Django 模板的循环中有一个跨度。

{% for book in books%}
<span class="book-list" data-toggle="collapse" data-target="#sheets_list{{workbook.id }}">
    {{book.name}}
    <span class="toggle_sign glyphicon glyphicon-chevron-down"></span> 
    <span class="date"> Last Update Time= {{book.reg_date}}</span>
</span>
{% endfor %}

我想在展开和折叠时上下切换图标，但还要确保它不会影响其他跨度，因为循环会为书名带来多个跨度。

我试过了

$('.toggle_sign').on('click', function() {
    $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

但它对切换标志的类没有任何作用。 有什么帮助吗？

Answer 1

在这里查看他的工作代码。

并且您还向事件传递了错误的类名。

  $(document).ready(function(e) {
    $('.parentDiv').click(function() {

      var toggle_sign = $(this).find(".toggle_sign");
      if ($(toggle_sign).hasClass("glyphicon-chevron-down")) {
        $(toggle_sign).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
      } else {
        $(toggle_sign).addClass("glyphicon-chevron-down").removeClass("glyphicon-chevron-up");
      }
      // or toggle event you can use.
      //$(toggle_sign).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    });
  });

.parentDiv {
  width: 100%;
  background: cyan;
  height: 50px;
  border:1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv">
  <span class="toggle_sign glyphicon glyphicon-chevron-down"></span>
</div>
<div class="parentDiv">
  <span class="toggle_sign glyphicon glyphicon-chevron-down"></span>
</div>

希望对你有帮助