我想要這樣的東西=> $（this）。（'＃id'）。css（'display'，'inline'）;

Question

我一直在試圖解決這個問題，現在已經有一段時間了。 這裏簡單就是我想要做的。

當您點擊選項缺席時，會彈出一個框。 與我發生什麼是相同的彈出框顯示，但是我想彈出與表名稱相關的框。

這裏是我下面的代碼：

while($row_students = mysqli_fetch_assoc($result_students)) 
    { 
    $student_name = $row_students['first_name'] .' '. $row_students['middle_name'] .' '. $row_students['last_name']; 
    $student_id = $row_students['id']; 
    echo 
    "<tr> 
    <td>{$student_id}</td> 
    <td>{$student_name}</td> 
    <td>{$row_students['batch_id']}</td> 
    <td> 
    <select class='form-control' name='reason{$student_id}' id='selection' > 
    <option value='NA' style='display:none';>Type of Absence</option> 
    <option value='absent'>Absent</option> 
    <option value='late'>Late</option> 
    <option value='sick'>Sick</option> 
    </select> 
    </td> 
    <td> 

    <select class='form-control' name='popupreason{$student_id}' 
    id='popup-text' style='display:none;'> 

    <option value='NA' style='display:none';>Please Select Reason</option> 
    <option value='death'>حالة وفاه</option> 
    <option value='tardy'>لم يتم اللحاق بحافلة المدرسة </option> 
    <option value='force'>مانع خارج عن الإرادة </option> 
    <option value='accident'>حادث في الطريق </option> 
    <option value='travel'>السفر </option> 
    <option value='expelled'>رفد مؤقت </option> 
    <option value='financial'>مانع مادي</option> 
    <option value='unknown'>غير معروف</option>      
    </select>  
    </div> 
    </td> 
    </tr>"; 
    } 
    } 
    ?> 
And for Jquery: 

    <script> 


    $("select[id='selection']").change(function(){ 
    if ($(this).val() === 'absent'){ 
     $('#popup-text').css('display','inline'); 
     } 
     }); 



/*I BELIEVE THE ISSUE IS HERE IN THE ABOVE AS I NEED TO USE SOMETHING LIKE 


$(this).('#popup-text').css('display','inline'); 
    BUT I COULDN'T GET THE SYNTAX CORRECT */ 

    $('#popup-text').change(function(){ 
    $("#popup-text").hide(); 
    }) 

    </script> 

Answer 1

我認爲這會工作：

$("select[id='selection']").change(function() { 
    var studentId = $(this).attr('name').match(/^reason(\d+)$/i)[1]; 

    $('#popup-text[name=popupreason' + studentId + ']') 
    .css('display','inline') 
    .focus() 
    ; 
}); 

或者只是：在每次迭代

$("select[id='selection']").change(function(){ 
    $("#popup-text").hide(); // hide others 

    if ($(this).val() === 'absent'){ 
     $('[name=popup' + $(this).attr('name') + ']') 
     .css('display','inline') 
     ; 
    } 
}); 

Answer 2

你有相同的ID，並因爲每個頁面的ID必須是唯一的 - 它無效。爲此使用類。

比你可以做

$(".selection").change(function(){ 
    if ($(this).val() === 'absent'){ 
     $(this) 
      .closest('tr') // find first tr in parents for current element 
      .next() // select next tr element 
      .find('.popup-text') // find select with relevant class in that tr 
      .css('display','inline') // change it's display 
     ; 
    } 
});