Question

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

更好地说出我想要实现的目标：

如果选择器具有任何选择框值的类，则删除此类，根据最新选择的值添加新类。

所以这是最新的代码：

$.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

  });
});
};

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

如果已经解决，请随意将其标记为重复:)

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

Answer 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>

Answer 2

您无法将数组传递给“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);
}

[编辑]哎呀，黑客攻击将无法正常工作... [编辑]现在修复

根据选择框值操作一些选择器类

2 个答案: