javascript - 单击链接后如何显示来自服务器的项目

Question

同学来了!因此，我创建了一个运行 $.ajax 请求的函数，并且对于每个项目，我将 html 输出到 DOM。好吧，检查一下:

  function getLinks (){
  let blogLinks;
  $.ajax(settings).then(function(data, status, xhr){
    data.forEach(function(item, i, arr){
      let id = item._id;
      if (item.title){
        blogLinks = `<li><a class="link" href=#${item.title}>${item.title}</a></li>`
        $($findUl).append(blogLinks);
      }
    })
  })
}

这个变量也可能是有用的信息:

let $blogViewAll =
    $(`<div class="blog-view">
        <h3>Check Out These Blogs</h3>
        <div class="column-1">
          <ul class="link-list"></ul>
        </div>
        <div class="column-2"></div>
      </div>`);

let $findUl = $($blogViewAll).find('.link-list');

它正在做我想要它做的事情并将链接附加到页面。现在我想单击链接并将消息正文显示在页面上。所以我正在尝试这个:

$findUl.on('click', function(e){
  $.ajax(settings).then(function(data, status, xhr){
    data.forEach(function(item, i, arr){
      //since you clicked on that link
      //I should look at what you clicked
      //match it to the corresponding obj{item.body}
      //and display it, but I don't know how to match and grab :(
    })
  })
});

这就是我被困住的地方!有什么建议么？谢谢!!! (顺便说一句，我正在使用tiny-za 服务器)

Answer 1

您可以通过属性e.currentTarget访问用户在初始参数e中单击的当前链接:

$findUl.on('click', function(e){
  // this gives you the DOM node that was clicked:
  console.log(e.currentTarget);
}

使用 jQuery 获取标题的小快捷方式:

$findUl.on('click', function(e){
  var title = $(e.currentTarget).text();
}

另一个注意事项，您实际上应该只在 ajax 调用中从服务器加载数据一次，而不是每次单击某些内容时(这很慢)。

我建议在页面加载时将数据加载到对象中，然后使用 objct 属性附加到 DOM。您将能够在未来的点击处理程序中访问同一对象