如何在不使用Play Framework 2.3.8中的按钮的情况下使glyphicon可点击并更改其外观？

Question

我有一个箭头形式的蓝色glyphicon。

<span class="glyphicon glyphicon-arrow-up" aria-hidden="true" style="color:blue"></span>

现在，如果我点击它，我想将其颜色更改为红色，然后计算旁边的数字。 我已经看到了几个解决方案，其中带有glyphicon的按钮用于更改外观/ glyphicon，但我想知道是否可以使用glyphicon并切换颜色。如果是，怎么样？

Answer 1

使用jQuery .css（），您可以在单击图标时更改图标的颜色。参考：http://api.jquery.com/css/

Answer 2

在span-tag中添加一个id，并为该数字创建另一个span。

$(document).ready(function() {
    $('#' + id_from_span_tag).click(function() {
        var $this = $(this);
        $this.css("color", "red");
        var num = $('#' + id_from_other_span);
        var currentNumber = num.text().length ? parseInt(num.text()) : 0;
        num.text(currentNumber + 1);
    });
});

Here is a fiddle