jQuery：如何匹配id的最终部分

Question

为了打开包含一些内容的弹出窗口，我有很多标签锚，其id以“poc”开头，如poc1，poc2，poc3 ...... 同样地，我有相同数量的tag div，其id以pop1开头，如pop1，pop2，pop3 ......我如何在jQuery中匹配它们，以便 poc1 - ＆gt; POP1 poc2 - ＆gt; POP2 我写的是

jQuery("a[id^='poc']").click(function() {
    jQuery('#pop1').bPopup();
});

但不是“pop1”，而是根据poc的最终值我需要对应的pop。有可能吗？

Answer 1

通过从点击的元素ID中替换字符串poc来获取具体数字：

jQuery("a[id^='poc']").click(function() {
    var num = $(this).attr('id').replace('poc','');
    jQuery('#pop' + num).bPopup();
});

示例

点击每个poc元素，相应的pop元素将变为红色

＆＃13;

＆＃13;

$('[id^=poc]').on('click', function() {
  var num = $(this).attr('id').replace('poc','');
  $('[id^=pop]').removeAttr('style');
  $('#pop' + num).css({'color':'red'});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="poc1">poc1</span>
<span id="poc2">poc2</span>
<span id="poc3">poc3</span>
<span id="pop1">pop1</span>
<span id="pop2">pop2</span>
<span id="pop3">pop3</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议您使用data属性，如下所示：

1. 将Common Class添加到所有锚元素
2. 将data-target元素添加到锚点以存储目标div id
3. 使用class
绑定事件
4. 在data-target
中使用event handler值

<强> HTML

<a id="poc1" data-target="#pop1" class="pocLinks"> Click Here </a>
<!--         ^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^

<强>的Javascript

jQuery(".pocLinks").on('click', function() {
    $($(this).data('target')).bPopup();
});

如果您不想更改现有的HTML。

您可以使用regex从所点击元素的id中提取数字。

jQuery("a[id^='poc']").click(function() {
    var no = $(this).attr('id').match(/\d+/)[0];

    $('#pop1' + no).bPopup();
});

<强>正则表达式

1. /：正则表达式分隔符
2. \d：匹配任何数字
3. +：匹配前一个实体一次或多次

Answer 3

1. 解析当前ID - this.id
2. 将其用作bPopup()
的选择器

jQuery("a[id^='poc']").click(function() {
    var num = this.id.split('poc').pop();
    jQuery('#pop' + num).bPopup();
});

<强> Reference

Answer 4

根据kapantzak的解决方案保存自己的var：

jQuery("a[id^='poc']").click(function() {
    jQuery( $(this).attr('id').replace('poc','#pop') ).bPopup();
});