Question

我有这个代码，里面有几个与div相关的链接。当我点击其中一个链接时，它弹出另一个div，使用＆＃34; Case No＆＃34;和＆＃34;键入＆＃34;。但是它只使用第一个链接中的数据，而不是我点击的任何其他数据。

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+"  &nbsp;&nbsp; || &nbsp;&nbsp;  "+caseno)
})

为什么当我点击链接时它只使用第一个链接信息？

Answer 1

使用箭头函数的一个权衡是this没有绑定。为了得到它的上下文，遗憾的是你不得不回到使用传统的函数语法（就像现在这样）。

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

Answer 2

你的html中有重复的id'type'。请改变它。

Answer 3

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

无法从链接javascript

3 个答案: