jQueryの好き嫌いのボタンシステム

Question

好き嫌いのボタンがありたいと思います。その1つをクリックすると、色が赤に変わります。しかし、私が両方をクリックすると、好き嫌いのアイコンが赤く表示されます。私はそれらのうちの1つだけが赤であることを常に望んでいます。どうすれば修正できますか？

私は、CSSと.hasClass、.removeClass、および.addClassを使用してJquery ORトグルで短いコードを書くことができるのだろうかと思います。

以下は、私が書いたjQueryのコードです：ここで

$('#Like').on({ 
'click': function() { 
    if($('#Like').attr('src') == 'images/Like.png') { 
     $('#Like').attr('src','images/Liked.png'); 
     $('#Dislike').attr('src') == 'images/Dislike.png'); 
    } 
    else { 
     $('#Like').attr('src','images/Like.png'); 
    } 
} 
}); 

$('#Dislike').on({ 
'click': function() { 
    if($('#Dislike').attr('src') == 'images/Dislike.png') { 
     $('#Dislike').attr('src','images/Disliked.png'); 
     $('#heartLike').attr('src') == 'images/Like.png'); 
    } 
    else { 
     $('#Dislike').attr('src','images/Dislike.png'); 
    } 
} 
}); 

、#likeなどと嫌いのアイコン元は#dislikeです。

Like.pngとDislike.pngは色のない画像で、Liked.pngとDisliked.pngは赤い色で塗りつぶされた画像です。状態のため

Answer 1

これを試してみてください、あなたはあなたのコードのようにボタンに別のIDを使用していました。クリックして嫌いなのはあなたの心のURLを変えていたように、これをLikeに変更しました。

$('#Like').on({'click': function() { 
if($('#Like').attr('src') == 'images/Like.png') { 
    $('#Like').attr('src','images/Liked.png'); 
    $('#Dislike').attr('src') == 'images/Dislike.png'); 
} 
else { 
    $('#Like').attr('src','images/Like.png'); 
} 
} 
}); 

$('#Dislike').on({'click': function() { 
if($('#Dislike').attr('src') == 'images/Dislike.png') { 
    $('#Dislike').attr('src','images/Disliked.png'); 
    $('#Like').attr('src') == 'images/Like.png'); 
} 
else { 
    $('#Dislike').attr('src','images/Dislike.png'); 
} 
} 
}); 

運のベスト:)

Answer 2

$('#Like').on({ 
'click': function() { 
    if($('#Like').attr('src') == 'images/Like.png') { 
     $('#Like').attr('src','images/Liked.png'); 
     $('#Dislike').attr('src','images/Dislike.png'); 
    } 
    else { 
     $('#Like').attr('src','images/Like.png'); 
    } 
} 
}); 

$('#Dislike').on({ 
'click': function() { 
    if($('#Dislike').attr('src') == 'images/Dislike.png') { 
     $('#Dislike').attr('src','images/Disliked.png'); 
     $('#heartLike').attr('src','images/Like.png'); 
    } 
    else { 
     $('#Dislike').attr('src','images/Dislike.png'); 
    } 
} 
}); 

Answer 3

あなたはクリックハンドラをバインドするために、共通のクラスを使用する必要があり、特定のクラスすなわちlikeとdislike CSSクラス、私はまた、CSSルールを使用してiconを表示するためにあなたをお勧めします。ここでは一般的な例である

$('span.common').on('click', function() { 
 
    $(this).toggleClass('like dislike') 
 
});

.like { 
 
    background-color: green 
 
} 
 
.dislike { 
 
    background-color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="common like">loren</span> 
 
<br /> 
 
<span class="common dislike">ipsum</span>