在jQuery中使用插件时错误无法获得值？

Question

我使用插件在大约字体系列的jQuery：

/** 
* Font selector plugin 
* turns an ordinary input field into a list of web-safe fonts 
* Usage: $('select').fontSelector(); 
* 
* Author  : James Carmichael 
* Website : www.siteclick.co.uk 
* License : MIT 
*/ 
jQuery.fn.fontSelector = function() { 

    var fonts = new Array(
       'Arial,Arial,Helvetica,sans-serif', 
       'Arial Black,Arial Black,Gadget,sans-serif', 
       'Comic Sans MS,Comic Sans MS,cursive', 
       'Courier New,Courier New,Courier,monospace', 
       'Georgia,Georgia,serif', 
       'Impact,Charcoal,sans-serif', 
       'Lucida Console,Monaco,monospace', 
       'Lucida Sans Unicode,Lucida Grande,sans-serif', 
       'Palatino Linotype,Book Antiqua,Palatino,serif', 
       'Tahoma,Geneva,sans-serif', 
       'Times New Roman,Times,serif', 
       'Trebuchet MS,Helvetica,sans-serif', 
       'Verdana,Geneva,sans-serif' 
); 

    return this.each(function(){ 

    // Get input field 
    var sel = this; 

    // Add a ul to hold fonts 
    var ul = $('<ul class="fontselector"></ul>'); 
    $('body').prepend(ul); 
    $(ul).hide(); 

    jQuery.each(fonts, function(i, item) { 

     $(ul).append('<li><a href="#" class="font_' + i + '" style="font-family: ' + item + '">' + item.split(',')[0] + '</a><input type="hidden" id="select_font_family" value="'+item+'" /></li>'); 
     // Prevent real select from working 
     $(sel).focus(function(ev) { 

     ev.preventDefault(); 

     // Show font list 
     $(ul).show(); 

     // Position font list 
     $(ul).css({ top: $(sel).offset().top + $(sel).height() + 4, 
        left: $(sel).offset().left}); 

     // Blur field 
     $(this).blur(); 
     return false; 
     }); 

     $(ul).find('a').click(function() { 
     var font = fonts[$(this).attr('class').split('_')[1]]; 
     $(sel).val(font); 
     $(ul).hide(); 
     return false; 
     }); 
    }); 

    }); 

} 

和HTML：

<input type="text" value="" id="select_font_family" /> 

使用jQuery：

$('input#select_font_family').fontSelector(); 
$('ul.fontselector').find('a').click(function() { 
    var test = $('input#select_font_family').val(); 
    alert(test); 
}); 

当我点击的结果不能得到价值，如何解决它？

Answer 1

我不知道这是否解决了您的问题，但是您将附加焦点和点击事件N次放入$ .each中，它应该只在每个循环外附加一次。

jQuery.fn.fontSelector = function() { 

    var fonts = new Array(
       'Arial,Arial,Helvetica,sans-serif', 
       'Arial Black,Arial Black,Gadget,sans-serif', 
       'Comic Sans MS,Comic Sans MS,cursive', 
       'Courier New,Courier New,Courier,monospace', 
       'Georgia,Georgia,serif', 
       'Impact,Charcoal,sans-serif', 
       'Lucida Console,Monaco,monospace', 
       'Lucida Sans Unicode,Lucida Grande,sans-serif', 
       'Palatino Linotype,Book Antiqua,Palatino,serif', 
       'Tahoma,Geneva,sans-serif', 
       'Times New Roman,Times,serif', 
       'Trebuchet MS,Helvetica,sans-serif', 
       'Verdana,Geneva,sans-serif' 
); 

    return this.each(function(){ 

    // Get input field 
    var sel = this; 

    // Add a ul to hold fonts 
    var ul = $('<ul class="fontselector"></ul>'); 
    $('body').prepend(ul); 
    $(ul).hide(); 

    jQuery.each(fonts, function(i, item) { 

     $(ul).append('<li><a href="#" class="font_' + i + '" style="font-family: ' + item + '">' + item.split(',')[0] + '</a><input type="hidden" id="select_font_family" value="'+item+'" /></li>'); 

    }); 

    // Prevent real select from working 
    $(sel).focus(function(ev) { 

     ev.preventDefault(); 

     // Show font list 
     $(ul).show(); 

     // Position font list 
     $(ul).css({top: $(sel).offset().top + $(sel).height() + 4, 
       left: $(sel).offset().left}); 

     // Blur field 
     $(this).blur(); 
     return false; 
    }); 

    $(ul).find('a').click(function() { 
     var font = fonts[$(this).attr('class').split('_')[1]]; 
     $(sel).val(font); 
     $(ul).hide(); 
     return false; 
    }); 

    }); 

}; 

Answer 2

好的，有几个问题。 该插件为每个字体选择附加一个新的点击处理程序。 我重写了插件来解决这个问题。

其次，我建议在值更新后触发一个事件并绑定到该事件上，而不是在字体选择器标签上注册另一个单击事件。

试试这个：

/** 
* Font selector plugin 
* turns an ordinary input field into a list of web-safe fonts 
* Usage: $('select').fontSelector(); 
* 
* Author  : James Carmichael 
* Website : www.siteclick.co.uk 
* License : MIT 
*/ 
jQuery.fn.fontSelector = function() { 

    var fonts = new Array(
       'Arial,Arial,Helvetica,sans-serif', 
       'Arial Black,Arial Black,Gadget,sans-serif', 
       'Comic Sans MS,Comic Sans MS,cursive', 
       'Courier New,Courier New,Courier,monospace', 
       'Georgia,Georgia,serif', 
       'Impact,Charcoal,sans-serif', 
       'Lucida Console,Monaco,monospace', 
       'Lucida Sans Unicode,Lucida Grande,sans-serif', 
       'Palatino Linotype,Book Antiqua,Palatino,serif', 
       'Tahoma,Geneva,sans-serif', 
       'Times New Roman,Times,serif', 
       'Trebuchet MS,Helvetica,sans-serif', 
       'Verdana,Geneva,sans-serif' 
); 

    return this.each(function(){ 

    // Get input field 
    var sel = this; 

    // Add a ul to hold fonts 
    var ul = $('<ul class="fontselector"></ul>'); 
    $('body').prepend(ul); 
    $(ul).hide(); 

    jQuery.each(fonts, function(i, item) { 

     $(ul).append('<li><a href="#" class="font_' + i + '" style="font-family: ' + item + '">' + item.split(',')[0] + '</a><input type="hidden" id="select_font_family" value="'+item+'" /></li>'); 
     // Prevent real select from working 
     $(sel).focus(function(ev) { 

     ev.preventDefault(); 

     // Show font list 
     $(ul).show(); 

     // Position font list 
     $(ul).css({ top: $(sel).offset().top + $(sel).height() + 4, 
        left: $(sel).offset().left}); 

     // Blur field 
     $(this).blur(); 
     return false; 
     }); 
    }); 

    $(ul).find('a').click(function() { 
     var font = fonts[$(this).attr('class').split('_')[1]]; 
     $(sel).val(font).trigger('change'); 
     $(ul).hide(); 
     return false; 
    }); 

    }); 

} 

$(document).ready(function(e) { 
    $('input#select_font_family').fontSelector(); 
    $('input#select_font_family').change(function() { 
     var test = $(this).val(); 
     alert(test); 
    }); 
});