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

Question

我有一个向上箭头形式的蓝色字形图标。

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

现在，如果我点击它，我想将它的颜色更改为红色，然后在它旁边数一数。我见过几种解决方案，其中带有字形图标的按钮用于更改外观/字形图标，但我想知道是否可以只使用字形图标并切换颜色。如果是，如何？

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

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

How to make a glyphicon clickable and change its appearance without using a button in Play Framework 2.3.8?

html

javascript

jquery

playframework