Получить номер в имени класса - jquery

Question

У меня есть html-код два divs - один из них, а второй - прямоугольник. Прямоугольник скрыт, и я хочу показать его, когда нажимается кнопка. Проблема в том, что у меня много кнопок и прямоугольников. Каждый из них имеет класс:

<div class="navid-1">Sonething</div> 

и этих прямоугольники

<div class="topicid-1">long text</div> 

Теперь мне нужна какая-то функция, которая будет выбрать что-то с классом navid- *, получить это число, и показать topicid- [это число ]. И я не знаю, как это сделать. Кроме того, было бы неплохо скрыть тот прямоугольник, который в настоящее время виден. (Как обменять их). Спасибо.

Answer 1

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

<div class="topicid-1" data-topic="1">long text</div> 

или вы могли бы вызвать функцию с параметром

<div class="topicid-1" onclick="showTopic(1)">long text</div> 

Answer 2

мишень всех кнопок с атрибутом начинается с селектором, затем кусочком последнего символа из имени класса, убедившись, что вы не имеете несколько классов и т.д., и использовать его, чтобы найти соответствующий прямоугольник:

$('[class^="navid-"]').on('click', function() { 
    $('.topicid-'+this.className.slice(-1)).show(); 
}); 

скрыть видимые прямоугольники, цель всех из них:

$('[class^="topicid-"]').hide() 

и место, что, прежде чем показать текущий один:

$('[class^="navid-"]').on('click', function() { 
    $('[class^="topicid-"]').hide() 
    $('.topicid-'+this.className.slice(-1)).show(); 
}); 

Answer 3

Вы можете использовать регулярные выражения, чтобы получить номера в конце атрибута class. Что-то вроде этого:

$('[class^=navid-]').on('click', function() { 
    var num = $(this).attr('class').match(/\d+$/)[0]; 
    $('.topicid-'+num).show(); 
});