为谷歌素材图标交换引导文本类答案

【问题标题】：Swap bootstrap text class for a google material icons为谷歌素材图标交换引导文本类
【发布时间】：2017-07-06 13:58:48
【问题描述】：

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

我正在尝试更改单击材质图标时的颜色。基本上我正在尝试打开和关闭它。问题是我的代码，虽然它确实发现图标没有读取类...我尝试添加一个类，使用一个 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>

【问题讨论】：

$(this).find("#staricon")
谢谢。我得到相同的结果。我从类文本警告位开始，它无法识别它的存在。

标签： javascript jquery css google-material-icons

【解决方案1】：

下面是一个代码，它会在你点击它时将类添加到#staricon，它会检查它是否已经有那个类。在 CSS 中，您可以为该类定义颜色。

当然，您可以添加类或删除类或执行其他操作。希望这段代码对您有所帮助。

$(".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>

【讨论】：

【解决方案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>

【讨论】：