jQuery获取选择器值帮助

Question

我有一个WP博客，其中包含一些通过PHP循环生成的DIV。我希望能够在有人点击它时显示有关DIV的其他信息。

代码如下所示：

<div class="story item-1">
<div class="story item-2">
<div class="story item-3">
<div class="story item-4">

（等等。可以是其中任何一个。）

点击上面的其中一项可能会显示以下某项：

<div class="data preview-1">
<div class="data preview-2">
<div class="data preview-3">
<div class="data preview-4">

我正在做以下事情：

$('.story').click( function() {
  var getNum   =  jQuery(this).attr('class');
  alert('hi ' + getNum);
});

但是如何提取我刚刚点击变量的项目的“数字”值（1,2,3,4等）？如果我可以将其转换为诸如“num”之类的变量，那么我可以轻松地使用jQuery .hide和.show来执行操作。到目前为止，我得到了整个类的价值。只需要第二节的数字。

我很感激任何帮助！谢谢！

Answer 1

连字符上的

I'd .split()，and .pop()结果数组的最后一项（数字）。然后.show()进行适当的预览。

$('.story').click( function() {
    var getNum = this.className.split('-').pop();
    $('.data.preview-' + getNum).show();
});

Answer 2

当然你可以使用字符串操作来提取id，但我提出了一个更好的解决方案：

在DOMReady上，遍历所有div，并使用jQuery的轻量级数据存储机制.data()为元素分配索引：

免责声明：未经测试

$(document).ready(function() {
   $('div.story').each(function(index) {
      $.data(this, "num", index);
   });
});

然后你可以点击它来取出它：

$('.story').click( function() {
  var getNum   =  $.data(this, "num");
  alert('hi ' + getNum);
});

这只是一个例子，你可能最终需要额外的元数据，你可以将你想要的任何东西绑定到元素上，并在以后使用它们。

Answer 3

$('.story').click(function() {
    var index = /item-(\d)/.exec($(this).attr('class'))[1] - 1;
    $('.data').hide().eq(index).show();
});