jQuery中的喜歡/不喜歡按鈕系統

-3

我想要一個喜歡和不喜歡的按鈕，當它們中的一個被點擊時，它會將顏色更改爲紅色。但是當我點擊這兩個圖標時，喜歡和不喜歡的圖標都會變成紅色。我只希望其中一個在任何時候都不是兩個都是紅色的。我如何解決它？jQuery中的喜歡/不喜歡按鈕系統

我想知道是否可以通過在JQuery或切換中使用CSS和.hasClass，.removeClass和.addClass來縮短代碼。

下面是我寫的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是填充紅色的圖像。

來源

2016-12-16 H.Kim

當接收到答案，請不要更新與回答你的問題。這樣做的結果是一個問題，即聲稱在工作代碼中存在問題，並且根據問題的答案是沒有意義的。 – halfer

試試這個，你用不同的ID代碼中的類似按鈕。不喜歡點擊你改變heartLike的網址，改成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'); 
} 
} 
});

祝您好運:)的

來源

2016-12-16 09:59:06

$('#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'); 
    } 
} 
});

來源

2016-12-16 09:54:19 Darshak

您應該使用普通類單擊處理程序綁定，特定的類即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>

來源

2016-12-16 09:55:54 Satpal

jQuery中的喜歡/不喜歡按鈕系統

回答

相關問題