jQuery获取选择器值帮助

Question

我有一个通过PHP循环生成一些DIVs的可湿性粉剂博客。我希望能够显示更多关于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);
});

但是如何提取"number“值(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();
});