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

但是你可以为它们添加一个公共类，并像

一样引用它

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

Answer 2

为所有相关的id分配一个类，并将事件绑定到类。

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

2 个答案: