Question

我有一个包含值的选择框：苹果80 苹果100 苹果120 苹果-300

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

我想操纵body类“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”，而不是添加更多值。任何其他点击将只替换相同的目标类。

另外，我还想抓住所有选择框值，以便将它们作为缩小这些类选择范围的条件。说，如果一个类匹配选择框中的任何值，请执行一些操作。

任何暗示都会非常感激。感谢。

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

如果您想记住之前调用点击的值，可以使用data()

存储值

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

使用jquery操作类

2 个答案: