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中的喜欢/不喜欢按钮系统

回答

相关问题