jqueryボタンのカラースイッチが機能しない

addClass(),removeClass()、hasClass()のメソッドを使用しようとしていました。しかし、この小さなコードは全く動作していませんか？jqueryボタンのカラースイッチが機能しない

すべての3つの機能に関する文書。それはうまくいくはずです。

<!DOCTYPE html> 
<html> 
<head> 
<title>Trials</title> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<style> 
    .liked 
    { 
     color:red; 
    } 
</style> 
</head> 
<body> 
<br><br><br> 
<button id="like1" class="btn likeBtns liked">5<span class="glyphicon glyphicon-heart"></span></button> 

<script> 
$('.likeBtns').on('click', function(){ 

    var x = $(this).attr('id'); 
    x = "#"+x; 
    if($("#like1").hasClass("liked")) 
    { 
     console.log("has"); 
     $("#like1").removeClass("liked"); 
    } 
    else 
    { 
     console.log("doesnt have"); 
     $("#like1").addClass("liked"); 
    } 
}); 
</script> 
</body> 
</html>

出典

2017-04-14 Vandan Kumbhat

代わりのチェック何かがクラスを持っている場合は、ちょうど 'toggleClass'を使用しています。オブジェクトがまだ存在しない場合はクラスをオブジェクトに追加し、存在する場合は削除します。 – Goose

良い選択肢、私は今でも同じ問題を試みた。元のコードで問題が見つかりましたか？ –

ブラウザでコンソールのエラーを確認できますか？それは正しい方向に向けるべきです。あなたのコードでは、 'x'に言及している行は、その後にセレクタを指定したので無関係です。以下の答えは機能的で、あなたの後ろのものとまったく同じように聞こえる。それはあなたがそれがいくつかのスタイリングの問題のために働いていないと思うかもしれないかもしれません。 – Goose

使用toggleClass()以下のように： -

の作業例： -

$('.likeBtns').on('click', function(){ 
 
    $(this).toggleClass("liked"); 
 
});

.liked{ 
 
    color:red; 
 
} 
 

 
.liked:hover, 
 
.liked:focus, 
 
.liked.focus { 
 
    color:red !important; 
 
}

<html> 
 
    <head> 
 
    <title>Trials</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <br><br><br> 
 
    <button id="like1" class="btn likeBtns">5<span class="glyphicon glyphicon-heart"></span></button> 
 
    </body> 
 
</html>

注： - あなたはボタンをクリックし、外をクリックしたときの効果が示されます。

あなたbootstrap.cssは、CSSの下にすでにボタンに適用しているためです： - 私のコードで

btn.focus, .btn:focus, .btn:hover { 
    color: #333; 
    text-decoration: none; 
}

私は、ブートストラップのcssコードを上書きしています。あなたはボタンの色を変更する必要がある場合そして今、それは

出典

2017-04-14 20:11:43

はい、問題はブートストラップであり、私はそれをいくつかのカスタムクラスで上書きします。正確な問題を指摘するための名誉！ –

@Vandanあなたをお待ちしております。すてきな一日を：）：） –

完全に正常に動作します完全にあなたは、クラス BTNも:hoverと:focus疑似クラスを持っていることを知っておく必要があります。つまり、.liked：hoverと.liked：focusを追加する必要があります。

スニペット：

$('.likeBtns').on('click', function(){ 
 
    $(this).toggleClass('liked') 
 
});

.liked 
 
{ 
 
    color:red; 
 
} 
 
.liked:hover, 
 
.liked:focus, 
 
.liked.focus { 
 
    color:red !important; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<button id="like1" class="btn likeBtns liked">5<span class="glyphicon glyphicon-heart"></span></button>

出典

2017-04-14 20:20:06 gaetanoM

jqueryボタンのカラースイッチが機能しない

答えて

関連する問題