javascript - 打开选项卡并滚动到 id 的最佳实践 - jQuery

Question

我的网站上有 3 个按钮，我希望每个按钮都打开一个选项卡(它们都打开同一个)并滚动到选项卡内的特定位置。 这就是我现在正在做的事情:

$(document).ready(function(){   
    var paymentOffset = jQuery("#payment").offset();
    $("#paymentBtn").click(function() {
        document.getElementById("tab-label-shipping_tab").click();                  
        $('body,html').delay(800).animate({
            scrollTop:paymentOffset.top
        }, 1000);
    });
});

$(document).ready(function(){   
    var shippingOffset = jQuery("#shipping").offset();
    $("#shippingBtn").click(function() {
        document.getElementById("tab-label-shipping_tab").click();                  
        $('body,html').delay(800).animate({
            scrollTop:shippingOffset.top
        }, 1000);
    });
 });

$(document).ready(function(){   
    var secureOffset = jQuery("#secure").offset();
    $("#securedBtn").click(function() {
        document.getElementById("tab-label-shipping_tab").click();                  
        $('body,html').delay(800).animate({
            scrollTop:secureOffset.top
        }, 1000);
    });
});

我有 3 个带有 ID 的按钮:“paymentBtn”、“shippingBtn”、“securedBtn”，每个滚动到另一个偏移量取决于所需的 ID。

我是 jQuery 的新手，我想知道这种方法是否正确

现在的新代码:

jQuery(document).ready(function() {
    let id = jQuery(this).prop('id');
    let refund = jQuery("#returns");
    let shipping = jQuery("#shipping");
    let secureInfo = jQuery("#secure");
jQuery("img.scroll").on('click',function(){
    document.getElementById("tab-label-shipping_tab").click(); 

    switch(id){
        case 'refundButton':
        scrollTo(refund);
        break;
        case 'shippingButton':
        scrollTo(shipping);
        break;
        case 'secureButton':
        scrollTo(secureInfo);
        break;
    }
});

function scrollTo(elem){
     let offset = elem.offset();
       jQuery('body, html').delay(600).animate({
      scrollTop: offset.top
    }, 1000);
}
});

Answer 1

您的代码的优化版本将是通过将它们绑定(bind)到单击事件来处理多个按钮的更好方法

这个例子只是一个简单的演示，在点击时向下滚动到指定的 div。

$(document).ready(function() {

  $("button.scroll").on('click', function() {
    let id = $(this).prop('id');
    let payment = $("#payment");
    let shipping = $("#shipping");
    let secure = $("#secure");

    switch (id) {
      case 'paymentBtn':
        myAnimate(payment);
        break;
      case 'shippingBtn':
        myAnimate(shipping);
        break;
      case 'securedBtn':
        myAnimate(secure);
        break;
    }
  });

  function myAnimate(elem) {
    let offset = elem.offset();
    $('body, html').delay(600).animate({
      scrollTop: offset.top - 30
    }, 1000);
  }
});

#tab {
position:fixed;
top : 0;
width:100%;
background:#fff;
left : 0;
height:30px;
}
.content {
margin-top : 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tab'>
  <button class='scroll' id='paymentBtn'>Pay</button>
  <button class='scroll' id='shippingBtn'>Ship</button>
  <button class='scroll' id='securedBtn'>Secure</button>
</div>
<div class='content'>
  <div id="payment">
    <h3>Payment</h3>
    <p>Payemet Information.</p>
    <p>Payemet Information.</p>
    <p>Payemet Information.</p>
    <p>Payemet Information.</p>
    <p>Payemet Information.</p>
    <p>Payemet Information.</p>
    <p>Payemet Information.</p>
    <p>Payemet Information.</p>
  </div>

  <div id="shipping">
    <h3>Shipping</h3>
    <p>Shipping Information.</p>
    <p>Shipping Information.</p>
    <p>Shipping Information.</p>
    <p>Shipping Information.</p>
    <p>Shipping Information.</p>
    <p>Shipping Information.</p>
    <p>Shipping Information.</p>
    <p>Shipping Information.</p>
    <p>Shipping Information.</p>
  </div>

  <div id="secure">
    <h3>Secure</h3>
    <p>Secure Information.</p>
    <p>Secure Information.</p>
    <p>Secure Information.</p>
    <p>Secure Information.</p>
    <p>Secure Information.</p>
    <p>Secure Information.</p>
    <p>Secure Information.</p>
    <p>Secure Information.</p>
    <p>Secure Information.</p>
    <p>Secure Information.</p>
  </div>
</div>

希望这个演示能让您了解如何使用 jQuery 处理点击事件。 :) :)