0

値の選択ボックスがあります: apple-80 apple-100 apple-120 apple-300

私は持っている：<body class="fruit apple-120 otherclass anotherclass">

ボディクラス「apple-120」を操作して、フルーツ、その他のクラス、別のクラス、クラスをそのままにして、選択ボックスから選択した値のいずれかに置き換えたいと考えています。

これまでのところ、これを作成しました：

$.fn.classSwitcher = function(options) {
  var baseOptions = {
    classTarget: 'body',
    oldClass: 'apple-120'
    };

  var options = $.extend(baseOptions, options);

  return this.each(function() {
         $(this).click(function() { 
           var t = $(this);
           var optionVal = t.val();
             $(options.classTarget).removeClass(options.oldClass).addClass(optionVal);
         });
  });
};

で、〜がある：

$('#sel option').classSwitcher();

これによりクラスが置き換えられましたが、選択ボックスを次にクリックすると、選択オプションの値が新しいクラスとして追加されますが、これは私が望んでいたものではありませんでした。

「apple-120」を新しい値に置き換えたいだけで、追加するのではありません。それ以外のクリックは、同じターゲット クラスを置き換えるだけです。

さらに、すべての選択ボックスの値を取得して、それらのクラスの選択を絞り込む条件として保持したいと考えました。クラスが選択ボックス内のいずれかの値と一致する場合、何かを実行します。

どんなヒントでも大歓迎です。ありがとう。

4

2 に答える 2

3

問題は、更新していないoptions.oldClassため、常に元のを削除しようとすることapple-120です。更新時に割り当てられているクラスに設定する必要があります。

...
     $(this).click(function() { 
       var t = $(this);
       var optionVal = t.val();
       $(options.classTarget).removeClass(options.oldClass).addClass(optionVal);
       options.oldClass = optionVal;
     });
...
于 2010-02-08T10:42:11.483 に答える
0

クリックの以前の呼び出しからの値を記憶したい場合は、値を data()で保存できます

$(this).click(function() { 
     var val = $(this).val();
     if (val != $(this).data('previous')) {
         $(this).data('previous', val );
         // ...
     }
});
于 2010-02-08T10:42:50.720 に答える