jQuery:更改事件目标的 css

Question

这是一个 fiddle ，我无法让它工作 http://jsfiddle.net/mjmitche/rAPcQ/22/

我有 html，用户单击按钮即可添加 friend 的姓名

 <button id="add-friend">Add Friend</button>

<ul id="friends-list"> </ul>

列表中的每个名称旁边，都有一个 span 元素 rich？用户可以点击以指示此人是否富有

Jim     [rich?]

如果用户单击范围，我希望名称的颜色发生变化。我还希望改变 span 的 html(即丰富？)，以便用户可以来回切换

在我看来，我创建了这样一个事件

events: {
      'click span.swap':  'swap',

    }, 

这样当用户单击范围时，就会调用“交换”函数。

swap: function(e) {

    var spin = e.target;
    var tit =  $(spin).css('color');

    if (tit === 'blue') {

        $(spin).css('color', 'black');
        $(spin).html('poor?');

    } else {

        $(spin).css('color', 'blue');
        $(spin).html('rich?');

    }

“swap”函数中的代码更改了被单击元素的 css 和 html。会改变的

吉姆[富有？]//最初是蓝色的

到

吉姆[可怜？]//“可怜”现在是黑色

然后，如果已经切换过一次，您就可以进行切换。但是，“swap”函数内的代码不起作用(即使它传递了 jsLint)。

你能告诉我我做错了什么吗？

更新

如果你能告诉我如何更改人名的 css，我会加分，该人名被包装在同一函数中的“friend”类中。

<span class="friend" style="color:pink">' + this.model.get('name') + '</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[rich?]</span>

HTML

 <button id="add-friend">Add Friend</button>

<ul id="friends-list"> </ul>

这是列表元素的容器，这些元素通过backbone.js View 添加然后单独添加

Answer 1

您遇到此问题是因为计算样式已转换为 RGB 颜色。

蓝色变为 rgb(0, 0, 255) 并且您的条件语句不匹配。