使用 jquery 操作类答案

【问题标题】：Manipulating classes with jquery使用 jquery 操作类
【发布时间】：2010-02-08 19:30:16
【问题描述】：

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

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

我想操作 body 类“apple-120”，使其被选择框中的任何选定值替换，同时保持fruit、otherclass、anotherclass、class 不变。

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

$.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”，而不是添加更多。任何其他点击只会替换相同的目标类。

另外，我还想获取所有选择框值，以将它们作为缩小这些类的选择范围的条件。说，如果一个类与选择框中的任何值匹配，就做点什么。

任何提示将不胜感激。谢谢。

【问题讨论】：

您是否以任何方式更新options.oldClass 中的值？
options.oldClass 应替换为选择框中的任何值。最大答案做到了。只等待抓取选择值部分。谢谢

标签： jquery dom-manipulation

【解决方案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;
     });
...

【讨论】：

嗨，马克斯。你解决了我的问题。我把它误认为是拉克兰。答案也在跳来跳去:) 是否也有关于获取所有选择框值的提示？谢谢
我不确定你所说的抓取选择框值是什么意思。您可以通过$('#sel option').toArray() 简单地获取所有<option> 元素，然后获取它们的.value。

【解决方案2】：

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

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

【讨论】：

这个工作到目前为止，只是缺少结束）。我会用其他答案更新我的发现。谢谢。
糟糕，选错了。你的代码实际上坏了。有什么提示吗？我和 Max 的答案一起测试，误以为你是这样，然后像往常一样缓存。