根據選擇框值操縱一些選擇器類

我正在嘗試優化我的自定義jquery插件。我在here之前詢問過這個問題。上一個問題已解決。現在我想讓我的插件更加靈活。因此，我不是依靠硬編碼的舊類，而是試圖使其依賴於選擇框的值的數組，該選擇框根據它們的值動態更改類。我這樣做的原因，有時課堂不在那裏，然後我點擊選擇選項。有時它適用於其他選擇器。根據選擇框值操縱一些選擇器類

爲了更好地說什麼，我想實現：

如果選擇了類中的任何選擇框的值，消除這種類，添加新的類，基於最新選擇的值。

因此，這裏是最新的代碼：

$.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如果和解決:)

任何暗示將非常感激。謝謝

來源

2010-02-13 swan

$.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-13 16:32:47 PetersenDidIt

這一個偉大的工程一個很大的安慰過。非常感謝你們的幫助。 – swan 2010-02-13 17:02:18

您不能將數組傳遞給「hasClass（）」。那麼，你可以，但它不會工作。 jQuery的沒有一個「減少」或「與foldl」功能，所以它不是那麼幹淨，做一個「任何」的操作，但在這裏我只是想到了一個黑客：

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); 
}

[編輯]哎呀那個黑客韓元在秒「T工作保持... [編輯]現在固定

來源

2010-02-13 16:24:37 Pointy

我沒有運氣，使其工作:( – swan 2010-02-13 17:01:18

根據選擇框值操縱一些選擇器類

回答

相關問題