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」操作を行うのはそれほどきれいではありませんが、私が考えたハックを次に示します。

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

[編集] おっと、ハックが機能しません。しばらくお待ちください ... [編集] 現在修正済み

于 2010-02-13T16:24:37.417 に答える