jquery - 在锚点单击时附加页面内容

Question

我正在尝试编写一个简单的 jquery 函数，该函数将 html 文件的内容插入到当前页面的特定点，并在单击链接时激活引导程序的 smoothscroll.js 以向下滚动到它。

这是我的开始：

脚本：

    <script type="text/javascript">
$('a').filter('[data-fetch]').click(function(e){
  var clicked = $(e.target).closest('a')
  ,   fetch = clicked.attr('data-fetch')
  ;

  $.ajax({
    url: fetch,
    success: function(data){

      $('body').append(data);
      smoothScroller(clicked.attr('href'));

    });
  });
});
    </script>

HTML：

<a href="#about" data-fetch="index-alt.html">Link</a>

#about锚点在页面index-alt.html中。这个对吗？

Answer 1

我认为您正在尝试获取 clicked 元素的属性，因此请尝试以下操作：

$('a').filter('[data-fetch]').click(function(e){
    var fetch = $(this).data('fetch'); //this here refers to the clicked element.

您也可以摆脱过滤器并执行以下操作：

$('a[data-fetch]').click(function(e){
     var fetch = $(this).data('fetch');

Answer 2

只需使用.load()

$('a').filter('[data-fetch]').click(function (e) {
    var url = $(this).data("fetch"); //use .data to retrieve custom data
    $("body").load(url, function() {
        console.log("data loaded");
    });
});