jQuery Get Selector Value Help

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

I'd .split() на дефис, and .pop() последний элемент (число) от результирующего массива. Затем .show() соответствующий предварительный просмотр.

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

Answer 2

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

Answer 3

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

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

Это просто пример, вы можете в конечном итоге, необходимые дополнительные метаданные, и вы можете связать все, что вы хотите, чтобы элементы, и использовать их позже.