Question

正如我在标题中所说，这里＆＃39;我想做什么。两个按钮，一个单击，然后颜色变为并保持更改，直到另一个按时钟。

目前这是我的完整代码

<span class="thumb" style="padding-right:7px;"><a href="/post/{{ post.slug }}/vote?is_up=1" class="vote"><i class="fa fa-thumbs-o-up"></i>love</a></span>   
<span class="thumb"><a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote"><i class="fa fa-thumbs-o-down"></i>hate</a></span>

<script>
$(document).ready(function(){

    $('.thumb').click(function(){
        $('.thumb').css('color', '#333');
        $(this).css('color', '#16A085');
    });

});
</script>

简化版就在这里; https://jsfiddle.net/zoaxt774/

我不确定我做错了什么，有人可以指导我如何做到这一点

Answer 1

您应该更改锚<a>内的颜色：

$('.thumb').click(function(){
    $('.thumb a').css('color', '#333');
    $(this).find('a').css('color', '#16A085');
});

小提琴：https://jsfiddle.net/zoaxt774/1/

顺便说一句，你的小提琴中没有包含jquery。

如果您的方案允许，最好将click事件添加到锚点：

$('.thumb a').click(function(){
    $('.thumb a').css('color', '#333');
    $(this).css('color', '#16A085');
});

Answer 2

这应该可以解决问题：https://jsfiddle.net/2wLvveqo/

当您单击其中一个链接时，IT会更改颜色...并且颜色会被锁定，直到您点击另一个链接。像一个切换。我认为这就是你希望它实现的方式。

$(".thumb a").click(function(e){
    var target =$(e.target); e.preventDefault();
    if(target.data("change")){
        target.css({ color:"red"});
    }else{
        var thumb = $(".thumb [data-change]");
        thumb.css({color:"blue"})
    }
    return false;
})

Answer 3

这是我的解决方案：

我只是简单地移动了课程＆＃39;拇指＆＃39;到标签，但你可以定义自己的类

   <span style="padding-right:7px;"><a href="#" class="thumb">likes</a></span>   
   <span ><a href="#" class="thumb">dislikes</a></span>

（文档）$。就绪（函数（）{

    $('a.thumb').click(function(){
        $('a.thumb').not(this).css('color', '#333');
        $(this).css('color', '#16A085');
     });
    });

如何切换（颜色变化）两个按钮，一个点击然后颜色变化并保持变化，直到另一个按时钟

3 个答案: