Question

Here’s a fiddle where I can’t get it to work http://jsfiddle.net/mjmitche/rAPcQ/22/

I have html where user clicks a button to add a friend’s name

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

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

Beside each name on the list, there’s a span element rich? the user can click to indicate if the person is rich

Jim     [rich?]

I want the color of the name to change if the user clicks the span. I also want the html of the span (i.e. rich?) to change, so that the user can toggle back and forth

In my view, I created an event like this

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

    }, 

so that when the user clicks the span, a ‘swap’ function is called.

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?');

    }

The code in the “swap” function changes the css and html of the element that was clicked. It will change

Jim [rich?] //originally blue

to

Jim [poor?] //’poor’ is now black

and then give you the ability to toggle if it’s already been switched once. However, the code inside ‘swap’ function is not working, (even though it’s passing jsLint).

Can you tell me what I’m doing wrong?

Update

Bonus points if you can tell me how to change the css of the person’s name, which is wrapped in a class “friend” in the same function.

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

This is the container for the list elements, which are added then added individually through a backbone.js view

Answer 1

check this fiddle : http://jsfiddle.net/UJ4HN/ (updated)

swap function

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?]');

    }
 },