获取类名中的数字 - jquery

Question

我有一个html代码两个div - 一个是按钮，第二个是矩形。当单击按钮时，矩形被隐藏，我想显示它。问题是，我有很多这些按钮和矩形。每个人都有班级：

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

和那些矩形

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

现在我需要一些功能，它将选择类navid- *，获取该数字，并显示topicid- [该数字]。我不知道，怎么做。 另外，隐藏当前可见的矩形会很好。 （就像交换它们一样）。 感谢。

Answer 1

您可以使用正则表达式来获取class属性末尾的数字。像这样：

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

Answer 2

而不是像这样设置类，您可以设置自定义数据属性，如

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

或者您可以使用参数

调用该函数

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

Answer 3

使用属性以选择器开头的所有按钮作为目标，然后从类名中剪切最后一个字符，确保您没有多个类等，并使用它来查找相关的矩形：

$('[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();
});