從最近的點擊按鈕獲得價值

Question

我想要做一個配置文件管理功能，因爲我想添加類型的用戶是學生到其他類型的用戶是老師的數據庫爲我使用我使用jquery和ajax但我正面臨一個問題，即每個學生都有一個添加按鈕，這些按鈕在html頁面中列出（這是使用php從數據庫中選擇完成的），當我按下每個學生的添加按鈕時，我在警報框中獲得未定義HTML的

部分

<li class="studdet"> 
    <div class="row"> 
     <div class="col-md-6" id="studname"> 
     <div class="col-md-3" id ="all"> 
      <label>Name Of Student:</label> 
      <p id="nameOfStud" >name of student fetched from database</p> 
     </div> 
     <div class ="col-md-3"> 
      <label></label> 
      </br></br> 
      <button class="btn-u" id="addStudents">Add</button> 
     </div> 
     </div> 
    </div> 
</li> 
<li class="studdet"> 
    <div class="row"> 
     <div class="col-md-6" id="studname"> 
     <div class="col-md-3"> 
      <label>Name Of Student:</label> 
      <p id="nameOfStud" >Name of student fetched from data base</p> 
     </div> 
     <div class ="col-md-3"> 
      <label></label> 
      </br></br> 
      <button class="btn-u" id="addStudents">Add</button> 
     </div> 
     </div> 
    </div> 
</li> 

的jQuery的流汗學生姓名的值是

$(document).on('click', '#all #addStudents', function() { 
     var option = $(this).closest("id","nameOfStud").html(); 
     alert(option); 
     // $.ajax({url: "http://localhost/ededge/Add_students/add_to_group",data: {studentname : option},type:"POST", success: function(result){ 
     // $('#studdet').attr('class','label label-light'); 
     // alert(result); 
     // }}); 
    }); 

但什麼我得到的警告框是未定義

幫我找到我的錯誤，如前

Answer 1

$(document).on('click', '#addStudents', function() { 
    var option = $(this).closest('div#studname').find('p#nameOfStud').text(); 
    alert(option); 

}); 

個

closest('div#studname')搜索父格在DOM heirachy與ID studname

find('p#nameOfStud')搜索在早期DOM樹p標籤後裔搜索格。

.text()獲取段落標記內的文本

Answer 2

不能有多個ID jQuery中。 ID是唯一的。 嘗試以下操作：

更改<p>元素如下：

<p class="nameOfStud" >Name of student fetched from data base</p> 

更改您的 '按鈕' 如下：

<button class="btn-u addStudents">Add</button> 

那就試試下面的代碼：

$(function(){ 
    $('.addStudents').click(function(){ 
     var option = $(this).closest('.nameOfStud').html(); 
     alert(option); 
    }); 
});