dongwo6477
dongwo6477
2016-10-20 08:08

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

I am looping out forum entries and next to each one i have placed a button to show or hide the reply to comment form, i got this to work using a simple JS script. However because the script is looped out it only works for the top one. presumably because it cannot identify each element using an id because id won't be unique (and class would cause all of them to show/hide). I did think of adding something like {{$comment->id}} to the id so it would be unique but i cannot then use the JS script? can i?

Below is the relevant code:

@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

I did have someone make a suggestion of changing to:

Button

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

Form

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

Script

<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>

But that still doesn't work but the elements are all now unique.

Many Thanks!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dtpd58676 dtpd58676 5年前

    Try using this,

    <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>
    
    点赞 评论 复制链接分享

相关推荐