2

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

我有 html 用户单击一个按钮来添加朋友的名字

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

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

在列表中的每个名字旁边，都有一个丰富的跨度元素？用户可以点击表明此人是否有钱

Jim     [rich?]

如果用户单击跨度，我希望更改名称的颜色。我还希望跨度（即丰富？）的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。它会改变

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

到

Jim [poor?] //'poor' 现在是黑色的

如果它已经切换过一次，然后让您能够切换。但是，“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>

这是列表元素的容器，这些元素被添加，然后通过一个主干.js 视图单独添加

4

2 回答 2

2

你有这个问题，因为计算的样式被转换为 rgb 颜色。

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

于 2012-09-21T06:50:59.353 回答
1

检查这个小提琴： 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?]');

    }
 },
于 2012-09-21T07:07:06.317 回答