dsfdfd1211
dsfdfd1211
2016-07-27 18:22

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

I have a list of students that I am looping through and adding to my page. Each student has a unique ID, and when getStudentInfo is invoked, it does something with the id. The problem is that whichever student I click, I get back the same id, belonging to student1.

Where am I going wrong?

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);
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • duanji9311 duanji9311 5年前

    Your code is selecting all the buttons on the page with that class and than reads the id of the first one in the list. You are not limiting it to the one that was clicked.

    What most people would do is add events with jQuery and not inline.

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

    For yours to work, you would need to pass a reference to the button that was clicked.

    onclick="getStudentInfo(this)"
    

    and than change it to use the node passed in

    function getStudentInfo(btn) {
        var studentLink = $(btn).attr('id');
        console.log(studentLink);
    }
    
    点赞 评论 复制链接分享
  • dongyaoxiu6244 dongyaoxiu6244 5年前

    You can do this without inline JavaScript and since you're using jQuery drop the onClick() and the form element:

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

    You also need to quote the identifier in the array variable, 'student_permalink'.

    The jQuery will be this:

    $('td').click(function() {
        var studentLink = this.id;
        console.log(studentLink);
    });
    
    点赞 评论 复制链接分享
  • dqouryz3595 dqouryz3595 5年前

    Like @epascarello alluded to, you are not selecting the button that was actually clicked. What you should do is have your event handling in your JS, not in the HTML so you can see better how it works and use the this keyword within the closure to reference the clicked button.

    $(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);
    
    });
    
    点赞 评论 复制链接分享
  • douya7282 douya7282 5年前

    Don't use inline events - there's no need to clutter up the HTML with that. You have a common class on your element, so just make a jQuery handler and use an instance of this

    $('.student-name-btn').click(function() {
        var id = this.id;
    });
    
    点赞 评论 复制链接分享
  • doumu8911 doumu8911 5年前

    You can pass the reference to the element being clicked on the onclick event

    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>';
    
    }
    

    And then use that to fetch the id in the js

    function getStudentInfo(el) {
        var studentLink = $(el).attr('id');
        console.log(studentLink);
    }
    
    点赞 评论 复制链接分享