Как превратить эти 3 скрипта в 1?

Question

У меня есть сценарий, который делает похожие вещи для разных идентификаторов, и я почти уверен, что это можно сделать в 1 скрипте, а не в 3, любые предложения приветствуются.

$("#size-btn-one").click(function() { 
    $('html,body').animate({ 
     scrollTop: $(".scroll-one").offset().top -100}, 2000); 
    }); 
}); 

$("#size-btn-two").click(function() { 
    $('html,body').animate({ 
     scrollTop: $(".scroll-two").offset().top -100}, 2000); 
    }); 
}); 

$("#size-btn-three").click(function() { 
    $('html,body').animate({ 
     scrollTop: $(".scroll-three").top -100}, 2000); 
    }); 
}); 

Answer 1

Объединить селектор, вы можете сделать and выбрать путем разделения запятой, как вы сделали с html, body тоже. И вы можете извлечь имя из элемента id разными способами, например, с простой заменой.

$("#size-btn-one, #size-btn-two, #size-btn-three").click(function() { 
    // getting only the last part of the elements id 
    var id = $(this).attr("id").replace("size-btn-", ""); 

    $("html, body").animate({ 
     // append the 'id' to the selector class 
     scrollTop: $(".scroll-" + id).offset().top -100}, 2000); 
    }); 
}); 

Answer 2

$("#size-btn-one, #size-btn-two, #size-btn-three").click(function(){ 

    var id = $(this).attr("id"); 
    var number = id.substring(id.lastIndexOf("-")); 

    $('html,body').animate({ 
     scrollTop: $(".scroll-"+ number).offset().top -100}, 2000); 
    }); 
}); 

Answer 3

$("#size-btn-one, #size-btn-two, #size-btn-three").on("click",function(){ 
    var idLastPart = $(this).attr('id'); 
    idLastPart = idLastPart.match(/one|two|three/)[0]; 
    $('.scroll-'+idLastPart).animate({ 
      //your animation 
    },300); 
}); 

Answer 4

В качестве альтернативы, я бы пару вверх btn и scroll- используя data- атрибуты и не использовать id= для этого.

<a href='#' data-link='1'>one</a> 
<a href='#' data-link='2'>one</a> 
<a href='#' data-link='xyz'>one</a> 

<div data-link='1'>content 1</div> 
<div data-link='2'>content 2</div> 
<div data-link='xyz'>content 3</div> 

Это также означает, что вы можете использовать семантические определения, а не просто цифры (хотя вы могли бы с идентификаторами, а также cc).

Тогда:

$("a[data-link]").click(function() { 
    var link = $(this).data("link"); 
    var div = $("div[data-link=" + link + "]"); 

    $('html,body').animate({ 
     scrollTop: div.offset().top - 100}, 2000); 
    }); 
}); 

Как правило, вы бы также добавить класс, но остановились, чтобы показать концепцию спаривания с помощью атрибутов данных.