Show/Hide 个在 foreach 循环中生成的元素

Question

我正在循环出论坛条目，在每个条目旁边我都放置了一个按钮来显示或隐藏对评论表单的回复，我使用一个简单的 JS 脚本让它工作。但是，由于脚本已循环播放，因此它仅适用于最上面的脚本。大概是因为它无法使用 id 识别每个元素，因为 id 不是唯一的（并且 class 会导致所有元素都为 show/hide）。我确实想过在 id 中添加类似 {{$comment->id}} 的东西，这样它就独一无二了，但是我不能再使用 JS 脚本了吗？我可以吗？

相关代码如下：

@extends('layout')

@section('head')
<script>
$(document).ready(function(){
    $("#showhidereply").click(function(){
        $("#replycomment").toggle();
    });
});
</script>
 @stop

@section('content')
    ...
    <!-- Comments -->
          @foreach ($post->comments as $comment)
              <span class="pull-right">
                  <div class=" btn-group">
                    <button class="btn btn">
                        <span class="glyphicon glyphicon-picture"></span> Owner's Name Here
                    </button>
                    <button class="btn btn btn-primary" id="showhidereply">
                      <span class="fa fa-reply"></span>
                    </button>
                  </div>
              </span>
              <p>{{ $comment->body }}</p>
            </div>

    <form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <div class="input-group" style="padding-top: 5px;">
                      <input type="text" name="body" class="form-control"></input>
                      <div class="input-group-btn">
                        <button type="submit" class="btn btn-primary">Reply to Comment</button>
                      </div>
                    </div>
                  </form>
                  </div>
            </div>
            </div>
        </div>
        </div>
          @endforeach
          </div>
</div>
@stop

有人建议我改为：

按钮

<button class="btn btn btn-primary" class="showhidereply" data-id="{{ $comment->id }}">
    <span class="fa fa-reply"></span>
</button>

表格

<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment-{{ $comment->id }}">

脚本

<script>
$(document).ready(function(){
    // change the selector to use a class
    $(".showhidereply").click(function(){
        // this will query for the clicked toggle
        var $toggle = $(this); 

        // build the target form id
        var id = "#replycomment-" + $toggle.data('id'); 

        $( id ).toggle();
    });
});
</script>

但这仍然不起作用，但元素现在都是唯一的。

非常感谢！

Answer 1

试试这个，

<button class="btn btn btn-primary" data-id="{{ $comment->id }}" onclick="showHide('replycomment-{{ $comment->id }}');">
    <span class="fa fa-reply"></span>
</button>

//javascript code
<script>
    function showHide(id){
        $("#"+id).toggle();
    }
</script>

Show/Hide 个在 foreach 循环中生成的元素

Show/Hide elements that are generated in a foreach loop

javascript

php

jquery

show-hide

laravel-blade