单击更改字形图标

Question

我试图在单击时更改此字形图标，但当 href = "#" 时它工作正常，但最初我的 href 包含一个 url，它通过视图访问 django 中的数据库。

HTML:

<div class='hidden-lg'>

    <div class="content-header">
         <h1>
            <a id = "star" href="#" data-toggle="tooltip" title = "Add to your list" data-placement="top">
      <span class="glyphicon glyphicon-star-empty"></span>
  </a>
            </h1>

    </div>
</div>

JS:

$('#star').click( function(){

$(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');

});

这很好用。 http://jsfiddle.net/asees/5XqyW/564/

但是当我将 href 更改为以下代码时，glyphicon 没有变化。

<a id = "star" href="{% url 'add' %}" data-toggle="tooltip" title = "Add to your list" data-placement="top">
      <span class="glyphicon glyphicon-star-empty"></span>
</a>

Answer 1

Working fiddle.

由于您点击的是锚 #star 您需要阻止默认事件（重定向到 href）使用 e.preventDefault() 比如 :

$('#star').click( function(e){
    e.preventDefault();

    $(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
});

单击更改字形图标

Change glyphicon on click

html

javascript

glyphicons

bootstrap-4