javascript - 如何将 jQuery 单击事件应用于多个 ID

Question

在下面的代码中，您可以看到我一遍又一遍地运行此代码块，只是更改了 ID 选择器...

是否有更好的方法将其压缩为 1 个小块并简单地更改 #line-1-font 以便数字可以是任何数字？

$( "body" ).on( "click", "#line-1-font", function( event ) {
    $('<link>')
      .appendTo($('head'))
      .attr({type : 'text/css', rel : 'stylesheet'})
      .attr('href', 'fonts/'+$(this).val()+'-font.css');
    $(this).prev().css("font-family", $(this).val());
});

//

// Change FONTS
$( "body" ).on( "click", "#line-1-font", function( event ) {
    $('<link>')
      .appendTo($('head'))
      .attr({type : 'text/css', rel : 'stylesheet'})
      .attr('href', 'fonts/'+$(this).val()+'-font.css');
    $(this).prev().css("font-family", $(this).val());
});

$( "body" ).on( "click", "#line-2-font", function( event ) {
    $('<link>')
      .appendTo($('head'))
      .attr({type : 'text/css', rel : 'stylesheet'})
      .attr('href', 'fonts/'+$(this).val()+'-font.css');
    $(this).prev().css("font-family", $(this).val());
});

$( "body" ).on( "click", "#line-3-font", function( event ) {
    $('<link>')
      .appendTo($('head'))
      .attr({type : 'text/css', rel : 'stylesheet'})
      .attr('href', 'fonts/'+$(this).val()+'-font.css');
    $(this).prev().css("font-family", $(this).val());
});

$( "body" ).on( "click", "#line-4-font", function( event ) {
    $('<link>')
      .appendTo($('head'))
      .attr({type : 'text/css', rel : 'stylesheet'})
      .attr('href', 'fonts/'+$(this).val()+'-font.css');
    $(this).prev().css("font-family", $(this).val());
});

$( "body" ).on( "click", "#line-5-font", function( event ) {
    $('<link>')
      .appendTo($('head'))
      .attr({type : 'text/css', rel : 'stylesheet'})
      .attr('href', 'fonts/'+$(this).val()+'-font.css');
    $(this).prev().css("font-family", $(this).val());
});

$( "body" ).on( "click", "#line-6-font", function( event ) {
    $('<link>')
      .appendTo($('head'))
      .attr({type : 'text/css', rel : 'stylesheet'})
      .attr('href', 'fonts/'+$(this).val()+'-font.css');
    $(this).prev().css("font-family", $(this).val());
});

Answer 1

是的，你可以这样做:

$( "body" ).on( "click", "[id^='line-'][id$='-font']", function( event ) {
    $('<link>')
      .appendTo($('head'))
      .attr({type : 'text/css', rel : 'stylesheet'})
      .attr('href', 'fonts/'+$(this).val()+'-font.css');
    $(this).prev().css("font-family", $(this).val());
});

但是您可以向它们添加一个公共(public)类并像这样引用它

$('body').on('click','.yourClass',function(){
    ... // your code goes here
});