Javascript 如何向每个元素添加唯一的事件侦听器

我正在做一个拉威尔的项目。我必须使用

@foreach

blade指令对资源进行迭代，如下所示：

@foreach($users as $user)
    <p @click="toggleClick">{{ $user->name }}</p>
    <p v-if="clicked">Lorem ipsum</p>
@endforeach

@foreach（$users作为$user）
{{{$user->name}

Lorem ipsum
@endforeach

您可能已经注意到这种方法的问题。问题是，如果有五个用户，则每个段落都会附加

toggleClick

侦听器。因此，如果我点击“一个”用户，隐藏的Lorem ipsum段落将立即显示为“所有”段落。以下是一个例子：

无名氏

同侧眼睑

无名氏（点击）

同侧眼睑

吉米·多伊

同侧眼睑

但我想要的是：

无名氏

无名氏（点击）

同侧眼睑

吉米·多伊

---

我怎样才能做到这一点呢？

只需将其包装在一些div或类似的smg中即可

@foreach($users as $user)
    <div>
        <p @click="toggleClick">{{ $user->name }}</p>
        <p v-if="clicked">Lorem ipsum</p>
    <div>
@endforeach

---

如果您不反对使用某些类和Javascript，我建议您使用以下方法：

var name=document.getElementsByClassName（“toggleClick”）；
对于（var i=0；i

.hiddenText{
显示：无；
}

约翰·多伊

Lorem ipsum 1

简·多伊

Lorem ipsum 2

吉米·多伊

---

Lorem ipsum 3

如果您希望每个段落都能独立运行，则必须有独立的侦听器。
例如，您可以在循环中添加索引，然后

切换单击（事件，i）

，其中

i

是段落编号。

---

在HTML中，只需使用布尔字段显示可见段落；）

丑陋但却是最合适的方法

q = f() ->
    $(this).parent().find('[v-if="clicked"]')
    // ...