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 for gettting value of student name是

$(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')在ID为 studname

的DOM heirachy中搜索父div

find('p#nameOfStud')在先前搜索的div的DOM树中搜索p标签后代。

.text()获取段落标记

中的文字

Answer 2

jQuery中不能有多个id。 ID是唯一的。请尝试以下方法：

更改您的<p>元素，如下所示：

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

更改您的按钮＆＃39;如下：

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

然后尝试以下代码：

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

从最近的点击按钮获取价值

2 个答案: