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

然后将其更改为使用

中传递的节点

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处理程序并使用this的实例

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

Answer 4

就像@epascarello所提到的那样，你没有选择实际点击的按钮。您应该做的事情是在JS中进行事件处理，而不是在HTML中，这样您就可以更好地了解它的工作原理，并使用闭包中的this关键字来引用单击的按钮。

$(document).on('click', '.student-name-btn', function(evt) {

    // Prevent default if trying to do your own logic
    evt.preventDefault();

    // Need to use the "this" keyword to reference the clicked element
    var studentId = $(this).attr('id');

    console.log(studentId);

});

Answer 5

您可以在没有内联JavaScript的情况下执行此操作，因为您正在使用jQuery删除onClick()和表单元素：

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

您还需要在数组变量'student_permalink'中引用标识符。

jQuery将是这样的：

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

无法在javascript中动态获取元素ID

5 个答案: