スワップブートストラップテキストクラス

Question

これは、これを行うための最適な方法ではないかもしれないので、私は材料のアイコンときの色を変更しようとしています

...私はJavaScriptに新しいです序文には、[OK]クリックされます。基本的に私はそれをオンとオフにしようとしています。問題は私のコードですが、アイコンがクラスを読んでいないことがわかりました...クラスを追加しようとしましたが、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

私はそれは、以下のものを使用して動作するようになった...助けのためのあなたのすべてに感謝：

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> 

Answer 2

は、あなたがそれをクリックしたときに#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>