Справка по jQuery Get Selector Value

Question

У меня есть блог WP с несколькими DIV, сгенерированными через циклы PHP. Я хотел бы иметь возможность показывать дополнительную информацию о 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

Конечно, вы могли бы использовать строковые манипуляции для извлечения идентификатора, но я предлагаю лучшее решение:

На 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();
});