將jQuery應用於每個foreach循環的實例，但只對點擊的元素進行操作

Question

我正在尋找將jQuery應用於每個foreach循環的實例，但僅對單擊的元素進行操作。

PHP的foreach循環低於：

@foreach ($entries as $entry) 
        <?php $row = DB::table('workout_trainings')->where('date', $entry->format('Y-m-d'))->where('user_id', Auth::user()->id)->count(); ?> 
        <tr style="border-top: 2px solid black;"> 
         <th rowspan={{$row}}><p>{{ $entry->format('l- d/m/Y') }}</p> 
          <button class="btn btn-default" id="goals_btn">Goals</button> 
          <button class="btn btn-default" id="logs_btn">Log Workout</button> 
         </th> 
         <?php $ws = DB::table('workout_trainings')->where('date', $entry->format('Y-m-d'))->where('user_id', Auth::user()->id)->get(); ?> 
         @foreach ($ws as $w) 
         <td>{{$w->exercise}}</td> 
         <td>{{$w->weight}}</td> 
         <td>{{$w->sets}}</td> 
         <td>{{$w->reps}}</td> 
        </tr> 

       @endforeach 
       <tr id="goals"> 
        <td colspan='5'>.</td> 
       </tr>  
       <tr id="logs"> 
        <td colspan='5'>.</td> 
       </tr> 
       @endforeach 
      </tbody>  
     </table>   
    <?php echo $entries->setPath('')->render(); ?> 

jQuery的我有很簡單：

$(document).ready(function(){ 
     $("#goals").css("display","none"); 
    $("#goals_btn").click(function(){ 
     $("#goals").toggle(200); 
    }); 
}); 

這顯然適用於頂部的項目。

UPDATE

幻燈片現在工作但只有在充滿少於兩排元素。

星期三不工作，但星期四和星期五做這個例子。

感謝

Answer 1

$(document).ready(function(){ 
     $("#goals").css("display","none"); 
    $("#goals_btn").click(function(){ 
     $(this).find("#goals").toggle(200); // use this to point clicked instance 
    }); 
}); 

Answer 2

你需要改變你的PHP代碼生成，你將有很多具有相同id屬性，它是無效的元素的HTML;它們在文檔中必須是唯一的。在這種情況下，類似乎更合適。

從那裏您可以使用關鍵字this來引用引發事件並遍歷DOM的元素以查找相關的tr.goals。試試這個：

.goals { 
    display: none; 
} 

$(document).ready(function(){ 
    $(".goals_btn").click(function(){ 
     $(this).closest('tr').next('.goals').toggle(200); 
    }); 
});