用相關單選按鈕顯示數據jquery

Question

我對每個單選按鈕有不同的數據，我希望相關div應該在單選按鈕下顯示。

當前每個數據都在第一個單選按鈕下面顯示

這是我的代碼。

<div class="portlet-body"> 
@foreach($students as $student) 
    <div> 
     <input type="radio" value="{{$student->id}}" name="student_lists[]" onclick="getdata({{ $student->id }})"/> 
     {{$lists->name}} 
     <span></span> 
    </div> 
    <div id="students-data"></div> 
@endforeach 
</div> 

腳本

<script> 
function getdata(id) 
{ 
    $.ajax({ 
     url: '/students/'+id, 
     type: "POST", 
     success: function (data) { 
     $('#students-data').html(data); 
     } 
    }); 
} 

控制器方法獲取HTML

public function loadData($id) 
{ 
    $students = DB::table('students')->select('name' , 'id')->where('user_id' , $id)->get(); 
    $data = ''; 
    $data .= '<div class="form-group"> 
         <label class="control-label col-md-1"> 
         </label> 
         <div class="col-md-8"> 
          <label class="">'; 
          foreach ($students as $student) { 
           $data .= "<input type='checkbox' class='chkbx' name='custom' value='{$student->name}'/> {$student->name} 
           <span></span>"; 
           } 
       $data .='</label> 
         </div> 
        </div>'; 
       return $data; 
    } 

單選按鈕的每一個數據選擇顯示下方第一個單選按鈕，但我想d iv應顯示在相關的單選按鈕下。

Answer 1

不允許發表評論，因此以反映最新的 「請求」。

@foreach($students as $student) 
    <div> 
     <input type="radio" value="{{$student->id}}" name="student_lists[]" onclick="getdata({{ $student->id }})"/> 
     {{$lists->name}} 
     <span></span> 
    </div> 
    <div class="students-data" id="students-data-{{$student->id}}"></div> 
@endforeach 

- >

function getdata(id) 
{ 
    $.ajax({ 
     url: '/students/'+id, 
     type: "POST", 
     success: function (data) { 
     $('.students-data').hide(); 
     $('#students-data-'+id).toggle().html(data); 
     } 
    }); 
} 

確保你在你的CSS文件

.students-data { 
    display:none; 
} 

Answer 2

ID在DOM中應該是唯一的。你應該這樣做：

@foreach($students as $student) 
    <div> 
     <input type="radio" value="{{$student->id}}" name="student_lists[]" onclick="getdata({{ $student->id }})"/> 
     {{$lists->name}} 
     <span></span> 
    </div> 
    <div id="students-data-{{$student->id}}"></div> 
@endforeach 

...

function getdata(id) 
{ 
    $.ajax({ 
     url: '/students/'+id, 
     type: "POST", 
     success: function (data) { 
     $('#students-data-'+id).html(data); 
     } 
    }); 
}