检测是否点击了 id 包含数字的 div答案

【问题标题】：Detect if a div with id including number is clicked检测是否点击了 id 包含数字的 div
【发布时间】：2016-08-29 14:18:44
【问题描述】：

我的 html 代码有 X 个元素，它们的 id 格式如下：

viewer_mX

这里，X 是一个从 1 到 m 的数字（m 每次可以不同）。

当有人单击这些元素之一时，我想使用 javascript 获取相应元素的编号 X。

我意识到我可能应该使用包含数字的类 (.viewer) 和 id (#x)。但是，我正在使用一个库来生成 html 元素，并且我被这个协议所困扰，并且必须充分利用它。

这是我目前拥有的 javascript：

$(document).ready(function () {
  $("#viewer>...").click(function () {
    x = ...
    var number = x;
  });
});

此代码中缺少的部分（由 3 个点表示）是查看器不是完整的 ID，但可能会被附加一些东西。我想存储单击的 div 之后的任何数字，但我不知道要使用哪个函数。

【问题讨论】：

【解决方案1】：

试试这个，

 $("[id^='viewer_']").click(function () {
    var number = this.id.match(/\d+$/)[0];
 });

【讨论】：

【解决方案2】：

为什么不使用类来识别元素，然后使用数据属性来存储您的 id（例如 data-id），然后获取此数据属性的值？

否则我会亲自使用这样的东西

$(this).attr('id').substr("viewer_m".length);

【讨论】：

【解决方案3】：

拆分或正则表达式

var id = this.id.split("_m")[1]

或

var id = this.id.match(/\d+$/)[0];

或者更好的是，使用数据属性

<div data-mid="123">

并引用它

$("[data-mid]").on("click", function () {
    var id = $(this).data("mid");
});

【讨论】：

【解决方案4】：

正如@Wax Cage 所提到的，一个更好的方法是使用类和数据属性来更好地组织。示例：

<div class="viewer" data-viewer-id="1">...</div>

$('.viewer').on('click', function() {
    var viewerId = $(this).data('viewerId');
    // ...
});

【讨论】：