javascript - 无法从链接 javascript 获取正确的文本数据

Question

我有这段代码，它是几个带有 div 的链接。当我单击其中一个链接时，它会弹出另一个 div，使用“案例编号”和“类型”填写。但是，它仅使用第一个链接中的数据，而不使用我单击的任何其他链接。

HTML

<div class="plu-view-data">
 <a href="#" id="tp_0">
    <div class="tp-box">
        <div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
        <div id="case_no">CASE NO: 1234</div>
    </div>
 </a>
 <a href="#" id="tp_1">
    <div id="tp_id" class="tp-box">
        <div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
        <div id="case_no">CASE NO: 1235</div>
    </div>
 </a>
</div>

JavaScript 是

$('.plu-view-data a').click(() => {
  $("#pedlookup-overlay").css('display','block')
  var type = $(this).find('#type').text()
  var caseno = $(this).find('#case_no').text()
  $('#plu-overlay-headbar').find('p').html(type+"     ||     "+caseno)
})

知道为什么当我单击链接时它只使用第一个链接信息吗？

Answer 1

使用箭头函数的一个权衡是没有 this 的绑定(bind)。不幸的是，为了恢复它的上下文，您必须重新使用传统的函数语法(目前的情况)。

$('.plu-view-data a').click(function() {
  ...
});