Question

我正在开展一个laravel项目。我必须使用@foreach blade指令迭代资源，如下所示：

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

您可能已经注意到此方法存在的问题。问题是如果有五个用户，toggleClick侦听器将附加到每个段落。所以，如果我点击＆＃34;一个＆＃34;用户，隐藏的Lorem ipsum段落将立即显示为＆＃34; all＆＃34;段落。这是一个例子：

John Doe

Lorem ipsum

Jane Doe（点击）

Lorem ipsum

Jimmy Doe

Lorem ipsum

但我想要的是：

John Doe

Jane Doe（点击）

Lorem ipsum

Jimmy Doe

我怎样才能做到这一点？

Answer 1

如果您希望每个段落独立运行，那么您必须拥有独立的侦听器例如，您可以在循环中添加索引，toggleClick(event, i)其中i是段落编号在HTML中，只需使用布尔字段显示可见段落;）

Answer 2

只需将它包裹在某个div或smg中就可以了。

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

JS in jQ

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

Answer 3

如果你不反对使用某些类和Javascript，我建议你采用这种方法：

var names = document.getElementsByClassName("toggleClick");

for (var i = 0; i < names.length; i++) {
  names[i].addEventListener("click", function(index, value) {
    this.nextElementSibling.classList.toggle("hiddenText");
  })
}

.hiddenText {
  display: none;
}

<p class="toggleClick">John Doe</p>
<p class="hiddenText">Lorem ipsum 1</p>
<p class="toggleClick">Jane Doe</p>
<p class="hiddenText">Lorem ipsum 2</p>
<p class="toggleClick">Jimmy Doe</p>
<p class="hiddenText">Lorem ipsum 3</p>

希望它有所帮助。

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

3 个答案: