操作使用jQuery类(Manipulating classes with jquery)

我有值的选择框：苹果-80苹果-100苹果-120苹果-300

我有： <body class="fruit apple-120 otherclass anotherclass">

我想操纵体类“苹果120”即可从选择框，同时保持了水果，otherclass，anotherclass，类不变换成任何选定的价值。

到目前为止，我创造了这个：

$.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();

这取代了阶级，但在选择框的下一个点击，更多选择选项值将作为新的类，这是不是我想要的东西。

我只是想取代“苹果120”用新的价值，而不是增加更多。其他任何点击都将只需更换相同的目标类。

另外，我也想抓住所有选择框中的值，以保持他们的条件，以缩小选择在这些类。说，如果一个类匹配任何值的选择框中，做点什么。

任何提示将非常赞赏。谢谢。

Answer 1:

问题是，你没有更新options.oldClass所以它总是试图删除原来的apple-120 。你应该将其设置为当你更新要被分配的类：

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

Answer 2:

如果你要记得点击以前调用值，你可以存储与值数据（）

$(this).click(function() { 
     var val = $(this).val();
     if (val != $(this).data('previous')) {
         $(this).data('previous', val );
         // ...
     }
});