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