jQuery 获取选择器值帮助

Question

我有一个 WP 博客，其中有一些通过 PHP 循环生成的 DIV。我希望能够在有人单击 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

我会.split() 在连字符上，和 .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();
});