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

As I put it in the title, here' what I'm trying to do. two buttons, one clicked then color gets changed and remain changed untill the other is clocked.

正如我在标题中所说,这是'我正在努力做的事情。两个按钮,一个点击然后颜色变化并保持变化,直到另一个按时钟。

currently this is my full code for this

目前这是我的完整代码

<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>

simplified version is here;https://jsfiddle.net/zoaxt774/

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

I'm not sure what I'm doing wrong, can someone direct me how I should do this

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

3 个解决方案

#1

You should change color inside anchor <a>:

你应该改变锚中的颜色:

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

Fiddle: https://jsfiddle.net/zoaxt774/1/

Btw there is not included jquery in your fiddle.

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

If your scenario allows, better add click event to anchor:

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

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

#2

This should do the trick: https://jsfiddle.net/2wLvveqo/

这应该做的伎俩:https://jsfiddle.net/2wLvveqo/

IT changes the color when you click one of the links... and the color is locked until you hit the other link. like a toggle. I think that is how you wanted it implemented.

当您单击其中一个链接时,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;
})

#3

Here is my solution:

这是我的解决方案:

I just simply moved class 'thumb' to the a tag, but you can define your own class

我只是将类'thumb'移到了a标签上,但你可以定义自己的类
```
 <a href="#" class="thumb">likes</a> 
 <a href="#" class="thumb">dislikes</a>
```

$(document).ready(function(){

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

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

#1