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を変更します。変わる

ジム[リッチ？]//元々は青

に

ジム[貧しい？]//「貧しい」は黒になりました

次に、すでに一度切り替えられている場合は切り替えることができます。ただし、「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ビューを介して個別に追加されます。

4

2 に答える 2

2

計算されたスタイルがrgbカラーに変換されるため、この問題が発生します。

青は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 に答える