在Jquery中创建可重用的函数

Making Reusable Function in Jquery

本文关键字：函数 Jquery 创建      更新时间：2023-09-26

我经常使用这个代码，它使我的网站加载缓慢。

    $('#start').click(function()  {
        $('html,body').animate({
            scrollTop : $('.scroll').offset().top
        },1500);//end animate
    });//end click

我以前每次都要更换#start和.scroll。任何建议吗?

将其封装在函数中

function foo(startElem, scrollElem) {
    $(startElem).click(function()  {
        $('html,body').animate({
            scrollTop : $(scrollElem).offset().top
        },1500);//end animate
    });
}

当你需要的时候就呼叫它。

foo('#start', '.scroll');

是的，通过传递一些参数

参考这个例子

function scrollCommon(startElem, scrollElem) {
    $(startElem).click(function()  {
        $('html,body').animate({
            scrollTop : $(scrollElem).offset().top
        },1500);//end animate
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <ul>
    <li><a href="#" onClick="scrollCommon($(this), '.one')" data-element="one">One</a></li>
    <li><a href="#" onClick="scrollCommon($(this), '.two')" data-element="one">Two</a></li>
    </ul>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div class="one">
    <b>One</b><br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>
  </div>
  <div class="two">
    <b>Two</b>
    <br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>
  </div>
</div>

除了这个问题是否真的对你的加载时间有影响之外，这里还有另一种设置方法，使用事件委托:

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

#start现在已经过时了，每个具有data-scroll-target属性的节点都将具有此功能

<div data-scroll-target=".scroll">#start</div>
...
<div class="scroll"> target </div>


https://jsfiddle.net/dsx8o04u/

相关文章：