Question

我有一个脚本可以为不同的id做类似的事情，我很确定这可以用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

作为替代方案，我会使用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>

这也意味着您可以使用语义定义，而不仅仅是数字（尽管您也可以使用ID）。

然后：

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

通常情况下，您还会添加一个类，但不会通过数据属性显示配对的概念。

Answer 4

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

如何将这3个脚本变为1？

4 个答案: