Question

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

我有html，用户点击按钮添加朋友的姓名

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

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

除了列表中的每个名称，还有一个span元素丰富？用户可以点击以指示此人是否富裕

Jim     [rich?]

如果用户点击跨度，我希望更改名称的颜色。我还希望更改跨度的html（即富？），以便用户可以来回切换

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

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

    },

这样当用户点击span时，就会调用'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。它会改变

Jim [rich？] //原来是蓝色

到

吉姆[可怜？] //'可怜'现在是黑色的

然后让你能够切换，如果它已被切换一次。但是，'swap'函数中的代码不起作用（即使它传递了jsLint）。

你能告诉我我做错了吗？

更新

如果您可以告诉我如何更改此人姓名的css，那么奖励积分将被包含在同一功能中的“朋友”类中。

<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视图单独添加

Answer 1

您遇到此问题，因为计算出的样式会转换为rgb颜色。

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

Answer 2

检查这个小提琴：http://jsfiddle.net/UJ4HN/（已更新）

交换功能

swap: function(e) {

    var $spin = this.$('.swap');
    var $name = this.$('.friend');
    var text =  $spin.text();


    if (text.indexOf('rich') != -1) {

        $spin.css('color', 'black');
        $name.css('color', 'green');   //here color for name
        $spin.html('[poor?]');

    } else  {

        $spin.css('color', 'blue');
        $name.css('color', 'red');     //here color for name
        $spin.html('[rich?]');

    }
 },

jQuery：改变事件目标的css

2 个答案: