Wie werden diese 3 Skripte in 1 umgewandelt?

Question

Ich habe ein Skript, das ähnliche Dinge für verschiedene IDs tut und ich bin ziemlich sicher, dass dies in 1 Skript statt 3 getan werden kann, sind alle Vorschläge willkommen.

$("#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

den Selektor Kombinieren Sie durch Komma Trennung eine and wählen machen, wie Sie auch mit html, body tat. Und Sie können den Namen aus dem Element id auf verschiedene Arten extrahieren, z. B. mit einem einfachen Ersetzen.

$("#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

Als Alternative würde ich die btn und die scroll- mit data- Attribute paaren und id= für diese nicht verwenden.

<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> 

Dies bedeutet auch, dass Sie semantische Definitionen verwenden können, anstatt nur Zahlen (obwohl Sie mit IDs sowie offc könnten).

Dann:

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

Normalerweise würde man auch eine Klasse hinzufügen, aber aufhörte, das Konzept der Paarung zu zeigen, über Datenattribute.