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

How to apply a jQuery click event to multiple ID's

本文关键字：应用于 ID 事件 jQuery      更新时间：2023-09-26

在下面的代码中，您可以看到我正在一遍又一遍地运行此代码块，只是更改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());
});

是的，你可以这样做：

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

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

相关文章：