Блог

Я просматриваю записи форума и рядом с каждой из них я разместил кнопку, чтобы показать или скрыть форму ответа на комментарий, я заставил это работать, используя простой JS-скрипт. Однако, поскольку сценарий замкнут, он работает только для верхнего. предположительно, потому что он не может идентифицировать каждый элемент с помощью идентификатора, потому что идентификатор не будет уникальным (и класс заставил бы все их показывать / скрывать). Я думал добавить что-то вроде {{$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>
  

Но это все еще не работает, но все элементы теперь уникальны.

Большое спасибо!

Попробуйте использовать это,

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