帮助AJAX和HTML

Question

我有类似的HTML代码

<div class="menu">
    <div>Latest</div>
    <div>Oldest</div>
</div>

我遍历JavaScript中的所有项目并在其上绑定click事件侦听器.现在在事件回调中,我想知道通过AJAX获取什么数据.我如何从一个项目中找出答案？我知道我应该在项目中放一些东西来确定项目的类型,但是我在哪里放呢？

Answer 1

如果你只使用divs,使用a className会方便有效.像这样:

<div class="menu">
    <div class="latest">Latest</div>
    <div class="oldest">Oldest</div>
</div>

...

function divClickHandler(event) {
  var div = event.target;
  if (div.className == 'latest')
    // load latest
  else if (div.className == 'oldest')
    // load oldest
}

如果您使用的是html5,那么更好的解决方案就是使用自定义数据属性 ; 像这样:

<div class="menu">
    <div data-type="latest">Latest</div>
    <div data-type="oldest">Oldest</div>
</div>

最优雅的解决方案是使用a标签而不是divs并拦截他们的点击:

<div class="menu">
    <a href="?whatever">Latest</a>
    <a href="?barfoo">Oldest</a>
</div>

...

function aClickHandler(event) {
  var a = event.target;
  // do your ajax call using a.href
  return false;
}