javascript - 将事件绑定(bind)到具有数据信息模式集的所有 html 元素

Question

我希望有这样的东西:

<span data-info-modal="some-value"></span>

1) 每个带有 data-info-modal 的元素都应该在用户 click 时触发一些事件。2) 在用户点击时，我需要从 data-info-modal 获取值(在示例中，它将是 some-value)。该值是获取description 的一些关键。3) 使用我拥有的描述，我需要打开一个模态窗口。

基本上，我必须向每个设置了 data-info-modal 的元素添加一个事件。该事件将触发函数:

function myfunction() {
   var getSomeValue = //get some value from data-info-modal
   var getDescription = getDescription(getSomeValue);
   $('desc-modal').show();
};

我不知道如何添加此事件以及如何从 data-info-modal 获取 some-value。我不知道如何正确调用这个(数据部分)，所以我无法通过搜索引擎找到任何有用的东西。

Answer 1

您可以使用 Has Attribute Selector [name] 绑定(bind)事件

Selects elements that have the specified attribute, with any value.

然后你可以使用.data()取值，因为identifier是多词的，需要用camelCase表示法

$("[data-info-modal]").on('click', function () {
    alert($(this).data('infoModal'))
});

$(document).ready(function() {
  $("[data-info-modal]").on('click', function(_) {
    alert($(this).data('infoModal'))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-info-modal="some-value">example</span>