Question

我正在尝试编写一个简单的jquery函数，它将html文件的内容插入到特定点的当前页面中，并在单击链接时激活bootstrap的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");
    });
});

在锚定点击上附加页面的内容

2 个答案: