通过点击事件获取数据属性

Question

我想使用 data-attribute 获得 div 值。在这种情况下，具体来说，data-pdf。正如您在我的示例中看到的那样，在我单击任一选项后，该值未定义。

我做错了什么？另外，价值会根据我点击的标题而改变吗？我只想一次存储一个值。

$(".pdfWrap").on("click", function (event) {
 let pdfChoice = $(this).find('.pdfWrap').data('pdf');
 console.log(pdfChoice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pdfWrap" data-pdf="Linear Structure">
    <h3 class="pdfTitle">Linear Structure</h3>
 </div><div class="pdfWrap" data-pdf="Dynamic Structure">
    <h3 class="pdfTitle">Dynamic Structure</h3>
 </div>

Answer 1

您正在 pdfWrap 上注册点击处理程序，因此回调中的 this 将仅为 pdfWrap 元素。您不需要执行额外的 find，而只需获取 data-attribute 值。

$(".pdfWrap").on("click", function(event) {
  let pdfChoice = $(this).data('pdf');
  console.log(pdfChoice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pdfWrap" data-pdf="Linear Structure">
  <h3 class="pdfTitle">Linear Structure</h3>
</div>
<div class="pdfWrap" data-pdf="Dynamic Structure">
  <h3 class="pdfTitle">Dynamic Structure</h3>
</div>

Answer 2

Here's how you can do it without jQuery in the event handler:

$(".pdfWrap").on("click", function(event) {
  let pdfChoice = this.dataset.pdf;
  console.log(pdfChoice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pdfWrap" data-pdf="Linear Structure">
  <h3 class="pdfTitle">Linear Structure</h3>
</div>
<div class="pdfWrap" data-pdf="Dynamic Structure">
  <h3 class="pdfTitle">Dynamic Structure</h3>
</div>

通过点击事件获取数据属性

Acquiring data attribute with click event

html

javascript

jquery

custom-data-attribute