Question

我正在循环论坛条目，在每个旁边我放置了一个按钮来显示或隐藏对评论表单的回复，我使用一个简单的JS脚本工作。但是因为脚本已经循环出来，所以它只适用于最顶层的脚本。大概是因为它无法使用id识别每个元素，因为id不是唯一的（并且类会导致所有这些元素显示/隐藏）。我确实想过在id中添加{{$ comment-＆gt; 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>

显示/隐藏在foreach循环中生成的元素

1 个答案: