関連ラジオボタンjqueryでデータを表示

Question

ラジオボタンごとに異なるデータがあります。ラジオボタンの下に関連するdivを表示する必要があります。

現在、すべてのデータが1番目のラジオボタンの下に表示されています

ここは自分のコードです。スクリプト

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

取得する

<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> 

は、第一のラジオボタンの下に表示されますが、私はしたいです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ファイルでの、関連データを示すだけのdivを非表示にする必要があります選択したラジオボタンの他​​の表示されている必要があり

.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); 
     } 
    }); 
}