Question

我试图在点击时更改此glyphicon但是当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');
});

单击更改glyphicon

1 个答案: