0

我正在尝试改进我的自定义 jquery 插件。我以前在这里问过这个。之前的问题解决了。现在我想让我的插件更灵活。因此，我不依赖于硬编码的旧类，而是试图让它依赖于选择框的值数组，这些值会根据它们的值动态更改类。我这样做的原因是，有时在我单击选择选项之前该类不存在。有时它适用于其他选择器。

为了更好地说明我想要实现的目标：

如果选择器具有任何选择框值的类，请删除此类，添加新类，基于最新选择的值。

所以这是最新的代码：

$.fn.classSwitcher = function(options) {
  var baseOptions = {
    classTarget: 'body',
    newClass: ''
    };

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

  var allVals = [];

  return this.find('option').each(function() {
  //retrieve all select box values
  allVals.push( $(this).val() );

         $(this).click(function() {
           var t = $(this);
           var newClass = (options.newClass) ? options.newClass : t.val();

           // Is it okay to do hasClass to array values?
           if ($(options.classTarget).hasClass(allVals))  {
           $(options.classTarget).removeClass(allVals).addClass(newClass);
           }

           // problem here I guess, can not update the old class with the one
           allVals = newClass;

           $.cookie('cookieNewClass', newClass, { expires: 1 });
           //alert('New Class: ' + $.cookie('cookieNewClass')); // produced expected new class
           //alert(allVals); // produced expected new classes

  });
});
};

该类已添加，但与上一个问题一样，我无法更新目标类以替换为新类。另请参阅代码中的注释以了解其他问题。

如果已解决并已解决，请随意将其标记为 dup :)

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

4

2 回答 2

1 
$.fn.classSwitcher = function(options) {
 var baseOptions = {
  classTarget: 'body'
 };

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

 var allVals = this.find('option').map(function(){
  return $(this).val();
 });
 var target = $(options.classTarget);

 this.change(function(){ 
  var t = $(this);
  var newClass = t.val();
  target.removeClass(allVals.get().join(' ')).addClass(newClass);
 });
};
$('select.changer').classSwitcher();

html:

<select class="changer">
 <option value="apple-80">apple-80</option>
 <option value="apple-100">apple-100</option>
 <option value="apple-120">apple-120</option>
 <option value="apple-300">apple-300</option>
</select>
于 2010-02-13T16:32:47.973 回答
0

您不能将数组传递给“hasClass()”。嗯，你可以，但它不会工作。jQuery 没有“reduce”或“foldl”功能，因此执行“any”操作并不那么干净，但这是我刚刚想到的一个 hack：

if ($.map(allVals, function(_, cv) { return $(options.classTarget).hasClass(cv) ? 'x' : ''); }).join('').length) {
  $.each(allVals, function(_. cv) { $(options.classTarget).removeClass(cv); });
  $(options.classTarget).addClass(newClass);
}

[编辑] 哎呀，hack 不会起作用，稍等片刻……[编辑] 已修复

于 2010-02-13T16:24:37.417 回答