Question

这是我的jquery代码，我想使用不同的ID但功能相同。现在在我的编码中，每个不同的id都会重复相同的函数/代码，但我想为所有不同的id创建一个函数来减少代码。我怎么能这样做？

/$(function(){
//    
//    $('a[href^="#"') .click(function(e){
//        var target = $(this).attr('href');
//        var strip = target.slice(1);
//        var anchor = $ ("a[name='" + strip +"']");
//        e.preventDefault();
//        $('html,body').animate({
//            scrollTop: anchor.offset().top
//        },(3000));
//    });
//});
$("#get").click(function(){
    $('html, body').animate({
        scrollTop: $("#getto").offset().top
    }, 2000);
});

$("#features").click(function() {
    $('html, body').animate({
        scrollTop: $("#featuresto").offset().top
    }, 2000);
});
1
//$("#myElement").offset({left:34,top:100});

$("#portfolio ").click(function() {
    $('html, body').animate({
        scrollTop: $("#portfolioto").offset().top
    }, 2000);
});

$("#client").click(function() {
    $('html, body').animate({
        scrollTop: $("#clientto").offset().top
    }, 2000);
});

$("#work").click(function() {
    $('html, body').animate({
        scrollTop: $("#workto").offset().top
    }, 2000);
});

$("#contact").click(function() {
    $('html, body').animate({
        scrollTop: $("#contactto").offset().top
    }, 2000);
});



jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 100) { 
            $(".header").addClass("navbar-fixed-top");  
        }
        else{
           $(".header").removeClass("navbar-fixed-top");
        }
    });
});


    jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 200) { 
            $(".gototop").addClass("appare");  
        }
        else{
           $(".gototop").removeClass("appare");
        }
    });
});

Answer 1

您可以组合选择器并使用id获取scrollTo元素。

$("#get, #features, #portfolio, #client, #work, #contact").click(function() {
    $('html, body').animate({
        scrollTop: $("#" + $(this).attr("id") + "to").offset().top
    }, 2000);
});

Answer 2

如果您经常需要此功能，那么您可以引入类似.scroll-on-click的类，它将启用滚动点击行为并使用HTML数据属性存储其滚动目标。
或者你可以使它更简单 - 只需使用此属性来附加处理程序：

$(document).on("click", "[data-scroll-target]", function(e) {
    var target = $(this).attr("data-scroll-target");
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);       
});

然后，在HTML中只使用以下属性：

<a href="#" data-scroll-target="#contactto">Go to Contact-to</a>
<a href="#" data-scroll-target="#workto">Go to Work-to</a>
etc.

正如@eisbehr在评论中提到的，如果您想为动态生成的元素启用此行为，请使用事件委派（在上面的示例中）。否则，您只需直接将其附加in order to slightly improve its performance：

即可

$("[data-scroll-target]").click(function(e) { ...

Answer 3

只需在单个函数中传递所有id

/$(function(){
//    
//    $('a[href^="#"') .click(function(e){
//        var target = $(this).attr('href');
//        var strip = target.slice(1);
//        var anchor = $ ("a[name='" + strip +"']");
//        e.preventDefault();
//        $('html,body').animate({
//            scrollTop: anchor.offset().top
//        },(3000));
//    });
//});


$("#get, #features, #portfolio, #client, #work, #contact").click(function() {
  $('html, body').animate({
     scrollTop: $("#" + $(this).attr("id") + "to").offset().top
  }, 2000);
});



jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 100) { 
            $(".header").addClass("navbar-fixed-top");  
        }
        else{
           $(".header").removeClass("navbar-fixed-top");
        }
    });
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 200) { 
            $(".gototop").addClass("appare");  
        }
        else{
           $(".gototop").removeClass("appare");
        }
    });
});

编辑：无需使用2 .ready()功能，因为您可以将上面的滚动功能同时写入。

Answer 4

使用逗号分隔ID。例如$("#id1, #id2, #id3").click();

以下是简化代码：

＆＃13;

//$(function(){
//
//    $('a[href^="#"') .click(function(e){
//        var target = $(this).attr('href');
//        var strip = target.slice(1);
//        var anchor = $ ("a[name='" + strip +"']");
//        e.preventDefault();
//        $('html,body').animate({
//            scrollTop: anchor.offset().top
//        },(3000));
//    });
//});

$("#get, #features, #portfolio, #client, #work, #contact").click(function() {
  var id = "#" + $(this).attr('id') + "to";
  $('html, body').animate({
    scrollTop: $(id).offset().top
  }, 2000);
});


jQuery(document).ready(function($) {
  $(window).scroll(function() {
    if ($(window).scrollTop() >= 100) {
      $(".header").addClass("navbar-fixed-top");
    } else {
      $(".header").removeClass("navbar-fixed-top");
    }

    if ($(window).scrollTop() >= 200) {
      $(".gototop").addClass("appare");
    } else {
      $(".gototop").removeClass("appare");
    }
  });
});

＆＃13;

Answer 5

您注释掉的代码非常接近我认为简洁明了的答案。我不喜欢＆＃34;硬编码＆＃34; JS中的ID可能会发生变化。

我在下面稍微改了一下（div＆＃39; s仅用于间距）：

＆＃13;

$('[href^="#"]') .click(function(e){
  var hash = this.hash.substr(1);
  e.preventDefault();
  $('html,body').animate({
    scrollTop: $('[name=' + hash + 'to]').offset().top
  },(3000));
});

＆＃13;

div {
  height: 400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#get">Get</a>

<div class="spacer"></div>

<a name="getto">Get to</a>

<div class="spacer"></div>

＆＃13;

它使用this.hash来获取锚href的哈希值。
锚点哈希值可以是动态的（避免其他答案中的ID链）

Answer 6

您可以使用comma分隔单独的选择器。在事件处理程序中，使用this来访问触发事件的元素。

＆＃13;

$("#get,#features,#portfolio,#client,#work,#contact").click(function() {
  $('html, body').animate({
    scrollTop: $("#" + $(this).attr("id") + "to").offset().top
  }, 2000);
});

＆＃13;

div {
  margin-top: 400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="get">Get</button>
<button id="features">Features</button>
<button id="portfolio">Portfolio</button>
<button id="client">Client</button>
<button id="work">Work</button>
<button id="contact">Contact</button>


<div id="getto">Get</div>
<div id="featuresto">Features</div>
<div id="portfolioto">Portfolio</div>
<div id="clientto">Client</div>
<div id="workto">Work</div>
<div id="contactto">Contact</div>

＆＃13;

如何为不同的id编写单个jquery函数

6 个答案: