0

我正在开发我的第一个插件。它将标准select元素转换为风格化的div. 如果我调用一个 jQuery 函数来收集我的所有$(".special_selctor") selects逻辑并执行逻辑，那么代码就可以正常工作，所以我决定将该逻辑拉入一个插件，这样我就可以直接调用stylize而select不是遍历我所有的特殊类。

这是来自非插件的代码片段（$(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()隐藏了和select新创建的div（this现在是一个数组）。如果我this.hide()之前打电话this.after(tmp)，它工作正常。

为什么要this.hide()迭代新的this“数组”而不仅仅是this 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 回答