リンクテキストから正しいテキストデータが取得されない

Question

私はこのコードをdiv内のdivとリンクしています。リンクの1つをクリックすると、「ケース番号」と「タイプ」を使用して別の部門が表示されます。ただし、最初のリンクのデータのみを使用します。他のデータはクリックしません。

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

矢印機能を使用することの1つのトレードオフは、thisの拘束がないことです。コンテキストを取得するには、残念ながら従来の関数構文（現在のところ）を使用する必要があります。

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

Answer 2

あなたのhtmlにid 'type'が重複しています。それを変更してください。

Answer 3

$('.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 + "    ||    " + caseno) 
 
    } 
 
});

<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>