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);
      }
    })
  })
}

这个var也可能是有用的信息：

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服务器btw）

Answer 1

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

$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次呼叫中加载来自服务器的数据一次，而不是每次点击某些内容（这是懒散的）。

我建议在加载页面时将数据加载到对象中，然后使用obejct属性附加到DOM。您将来可以在以后的点击处理程序中访问该对象

单击链接后如何从服务器显示项目

1 个答案: