将 bootstrap 文本 class 换成 google material 图标

Question

好的序言我是 javascript 的新手所以这可能不是这样做的最佳方式...

我试图在单击 material 图标时更改它的颜色。基本上我试图打开和关闭它。问题是我的代码确实发现图标没有读取 class...我尝试添加一个 class，使用一个 id，甚至一个名称，但它无法读取它。我已经看到其他响应，其中图像被交换并尝试过图像交换，但我只想改变颜色。

JAVASCRIPT:

function updateFavorites()
{
if($(this).find($("#staricon")).hasClass('text-warning'))
{
 $(this).find($("#staricon")).addClass('text-warning');

}
else
{                     
$(this).find($("#staricon")).removeClass('text-warning');
} 
}

HTML:

<a  class=" stats pull-right " href="javacript:void" ><span 
onclick="updateFavorites()"><i id="staricon" class="text-warning material-
icons " title="Favorite" >star</i></span></a>

Answer 1

下面的代码会在您单击 #staricon 时将 class 添加到 #staricon，并且它会检查它是否已经具有 class。在 CSS 中，您可以定义 class 的颜色。

当然，您可以添加 class 或删除 class 或执行其他操作。希望这段代码能帮到你。

$(".stats").on('click', function() {
  if (!$(this).find("#staricon").hasClass('SOME_CLASS'))
    $(this).find("#staricon").addClass('SOME_CLASS');
})

.SOME_CLASS {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class=" stats pull-right " href="javacript:void"><span><i id="staricon" class="text-warning material-
    icons " title="Favorite" >star</i></span></a>

Answer 2

谢谢大家的帮助...我使用以下方法让它工作：

JAVASCRIPT

updateFavorites(id){
if($(this).find('#staricon'+id)){
    if($('#staricon'+id).hasClass('star-color')) { 
        $('#staricon'+id).removeClass('star-color');
    }
    else {
        $('#staricon'+id).addClass('star-color');
    }
}
}

HTML:

<a  class=" stats pull-right " href="javacript:void" ><span id="staricon' . $story_id .'"   onclick="updateFavorites(' . $story_id . ')"><i  class=" material-icons " title="Favorite" >star</i></span></a>

将 bootstrap 文本 class 换成 google material 图标

Swap bootstrap text class for a google material icons

javascript

css

jquery

google-material-icons