将 jQuery 应用于 foreach 循环的每个实例，但仅对单击的元素进行操作答案

【问题标题】：Apply jQuery to every instance of foreach loop but only operating on the element clicked upon将 jQuery 应用于 foreach 循环的每个实例，但仅对单击的元素进行操作
【发布时间】：2017-01-24 13:01:39
【问题描述】：

我希望将 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);
    });
});

这显然适用于顶部项目。

更新

Slide 现在只适用于填充少于两行的元素。

星期三不工作，但在本例中星期四和星期五工作。

谢谢

【问题讨论】：

标签： javascript jquery foreach

【解决方案1】：

您需要更改您的 PHP 代码生成的 HTML，因为您将有很多元素具有相同的 id 属性，这是无效的；它们在文档中必须是唯一的。在这种情况下，类似乎更合适。

从那里您可以使用this 关键字来引用引发事件的元素并遍历DOM 以找到相关的tr.goals。试试这个：

.goals {
    display: none;
}

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

【讨论】：

这很好用@Rory McCrossan，但是它显示了另一个问题，即仅适用于少于两个项目的行。我认为这是一个 HTML 表格问题。

【解决方案2】：

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

【讨论】：

你好@A.t.效果很好，但是它引发了我在上面的更新中解释过的另一个问题。