如何在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>

希望如此，这将帮助你很多