javascriptで要素IDを動的に取得できません

Question

私はループして自分のページに追加する学生のリストを持っています。各生徒は一意のIDを持ち、getStudentInfoが呼び出されると、idを持つものが実行されます。問題は、私がクリックする学生がstudent1に属する同じIDを返すということです。

どこが間違っていますか？

foreach ($students as $student) { 


echo '<tr>'; 
    echo '<td> 
     '.$student[student_permalink].' 
     <input type="submit" 
      value="info" 
      onclick="getStudentInfo()" 
      class="student-name-btn" 
      id="'.$student[student_permalink].'" 

     /> 
    </td>'; 

} 

JS：

function getStudentInfo() { 
    var studentLink = $('.student-name-btn').attr('id'); 
    console.log(studentLink); 
} 

Answer 1

あなたのコードは、そのクラスでページのすべてのボタンを選択していて、リストの最初のIDを読み込んでいます。あなたはそれをクリックされたものに限定していません。

ほとんどの人が行うことは、jQueryを使用してインラインではなくイベントを追加することです。

//needs to be loaded after the element or document ready 
$(".student-name-btn").on("click", function() { 
    console.log(this.id); 
}); 

あなたが作業するには、クリックされたボタンへの参照を渡す必要があります。

onclick="getStudentInfo(this)" 

とあなたはインラインJavaScriptをせずにこれを行うと、あなたはjQueryのを使用しているので、onClick()とフォーム要素をドロップすることができ

function getStudentInfo(btn) { 
    var studentLink = $(btn).attr('id'); 
    console.log(studentLink); 
} 

Answer 2

あなたはonclickイベント

foreach ($students as $student) { 


echo '<tr>'; 
    echo '<td> 
     '.$student[student_permalink].' 
     <input type="submit" 
      value="info" 
      onclick="getStudentInfo(this)" // << added this which refers to the input 
      class="student-name-btn" 
      id="'.$student[student_permalink].'" 

     /> 
    </td>'; 

} 

上でクリックされた要素への参照を渡すそして、JSでIDを取得するためにそれを使用することができます

function getStudentInfo(el) { 
    var studentLink = $(el).attr('id'); 
    console.log(studentLink); 
} 

Answer 3

インラインイベントを使用しないでください。HTMLを混乱させる必要はありません。あなたはこれだけjQueryのハンドラを作成し、あなたが実際にクリックされたボタンを選択していない、に触れた@epascarello this

$('.student-name-btn').click(function() { 
    var id = this.id; 
}); 

Answer 4

同様のインスタンスを使用して、あなたの要素に共通のクラスを持っています。 はにする必要があります。HTMLではなく、JS内でのイベント処理があります。その結果、クロージャ内のthisキーワードをクリックしてボタンを参照することができます。

Answer 5

に渡されたノードを使用するように変更しより：

echo '<tr>'; 
echo '<td id="'.$student['student_permalink'].'" > 
    '.$student['student_permalink'].' 
     </td>'; 

を

また、配列変数'student_permalink'の識別子を引用する必要があります。あなたがクリックされたボタンを選択されていないため、

$('td').click(function() { 
    var studentLink = this.id; 
    console.log(studentLink); 
});