0

私は最初のプラグインに取り組んでいます。標準select要素を定型化された要素に変換しdivます。すべてを収集してロジックを実行するjQuery関数を呼び出すと、コードは正常に機能するため、すべての特別なクラスを繰り返すのではなく、$(".special_selctor") selects直接呼び出すことができるように、そのロジックをプラグインに取り込むことにしました。stylizeselect

これがNONプラグインからのコードの抜粋です（これは私のカスタムクラスでマークされ$(this)たインスタンスです）：select

var tmp = '';
tmp += '<div class="jm-select"' + (f_width ? ' style="width:' + (parseInt(f_width) + 7 + 32) + 'px;"' : '') + '>';
tmp += '<a ' + (f_width ? ' style="width:' + f_width + 'px;"' : '') + ' href="javascript:void(0)"><span class="display">' + display + '</span><span class="arrow"></span></a>';
tmp += '<div class="options"' + (f_width ? ' style="width:' + (parseInt(f_width) + 7) + 'px;"' : '') + '>';
$(this).children('option').each(function () {
  tmp += '<div class="option"><span class="display">' + $(this).html() + '</span><span class="value">' + $(this).attr('value') + '</span></div>';
});
tmp += '</div>';
tmp += '</div>';

$(this).after(tmp);
$(this).hide();

スペシャルを作成してdivから非表示にしますselect

私のプラグインコード（注：CoffeeScriptにあります）：

if this.attr('data-width')
f_width = this.attr('data-width')
tmp = ''
tmp += '<div class="jm-select"' + (if f_width then ' style="width:' + (parseInt(f_width) + 7 + 32) + 'px;"' else '') + '>'
tmp += ' <a ' + (if f_width then ' style = "width:' + parseInt(f_width) + 'px;" ' else ' ') + ' href = "javascript:void(0)" > <span class="display" > ' + display + ' </span><span class="arrow"></span > </a>'
tmp += '<div class="options"' + (if f_width then ' style="width:' + (parseInt(f_width) + 7) + 'px;"' else '') + '>'
this.children('option').each () ->
  tmp += '<div class="option"><span class="display">' + $(this).html() + '</span><span class="value">' + $(this).attr('value') + '</span></div>'
tmp += '</div>'
tmp += '</div>'


this.after(tmp)
this.hide()

と新しく作成された（現在は配列）のthis.hide()両方を非表示にします。前に電話すれば、問題なく動作します。 selectdivthisthis.hide()this.after(tmp)

オブジェクトだけでなく、新しい「配列」をthis.hide()反復処理するのはなぜですか？thisthis select

CoffeeScriptから変換された完全なプラグインコード

var $;

$ = jQuery;

$.fn.jmselect = function() {
  var display, f_width, name, tmp, value;
  name = this.attr('name');
  value = this.val();
  display = this.children("option:selected").text();
  if (this.attr('data-width')) {
    f_width = this.attr('data-width');
  }
  tmp = '';
  tmp += '<div class="jm-select"' + (f_width ? ' style="width:' + (parseInt(f_width) + 7 + 32) + 'px;"' : '') + '>';
  tmp += ' <a ' + (f_width ? ' style = "width:' + parseInt(f_width) + 'px;" ' : ' ') + ' href = "javascript:void(0)" > <span class="display" > ' + display + ' </span><span class="arrow"></span > </a>';
  tmp += '<div class="options"' + (f_width ? ' style="width:' + (parseInt(f_width) + 7) + 'px;"' : '') + '>';
  this.children('option').each(function() {
    return tmp += '<div class="option"><span class="display">' + $(this).html() + '</span><span class="value">' + $(this).attr('value') + '</span></div>';
  });
  tmp += '</div>';
  tmp += '</div>';
  this.hide();
  this.after(tmp);
  this.children("a").click(function(event) {
    event.stopPropagation();
    $('.jm-select').addClass('inactiveSelect');
    $(this).parent('.jm-select').removeClass('inactiveSelect');
    $('.inactiveSelect').children('.options').hide();
    return $(this).parent('.jm-select').children('.options').toggle();
  });
  this.find(".options .option").click(function() {
    var tmp2;
    tmp = $(this).children('span.value').html();
    tmp2 = $(this).children('span.display').html();
    $(this).parent('.options').parent('.jm-select').prev('select').val(tmp).trigger('change');
    $(this).parent('.options').parent('.jm-select').children('a').children('.display').html(tmp2);
    return $('.jm-select').children('.options').hide();
  });
  return this;
};
4

1 に答える 1

0

.eachプラグインの動作をループでラップする必要があると思います。

$.fn.jmselect = function() {
  return this.each(function() {
    // all your stuff here, except the final return
  });
};
于 2012-11-09T01:19:42.107 に答える