каждый загрузочный мод повторяет один и тот же идентификатор в laravel с ajax

Question

Я написал некоторый код для просмотра всех отображаемых подробностей событий, используя модальное всплывающее окно начальной загрузки при нажатии кнопки «Читать далее».но когда я нажимаю кнопку «читать дальше», каждый ответ повторяет один и тот же идентификатор.это мой код laravel

@if(!empty($event))
    @foreach($event as $value)
       <!-- Single Blog Post -->
       <div class="single-blog-post d-flex" id="event_tag">
       <div class="post-thumbnail">
       <img src="{{asset('images/'.$value->image)}}" alt="">
        </div>
        <div class="post-content">
         <a class="post-title">
            @if(strlen($value->title) <= 35)
               {{$value->title}}
            @else
            {{substr($value->title, 0, 35) . '...'}}
            @endif
            </a>
            <div class="post-meta d-flex justify-content-between">
            <center><button id="event_button" class="post-cata cata-sm cata-success text_white" data-toggle="modal" data-target="#myModal">Read More</button></center>
             </div>
            </div>
         <input type="hidden" name="event_id" id="event_id" value="{{$value->id}}"></div>
         @endforeach
       @endif

, и это код javascript для получения идентификатора и отображения каждой детали идентификатора.

<script>
$(document).on("click", "#event_button", function() {      
    var id = $("event_id").val();
    console.log(id);
  $.ajax({
    url: "/event/" + id + "/show",
    dataType: "json",
    success: function(html) {
      $("#event_title").html(html.data.title);          
  }
});
})
</script>

каждый раз, когда повторяется идентификатор № 2 при нажатии каждого события кнопка «читать дальше»,как я могу это исправить?

Answer 1

присвойте имя классу кнопке и добавьте атрибут к кнопке

<button  class="event_button post-cata cata-sm cata-success text_white" data-eventid="{{$value->id}}">Read More</button>

, поэтому нет необходимости использовать скрытый идентификатор ввода

, теперь используя jQuery:

$(document).on('click','.event_button',function(){
     var event_id = $(this).attr("data-eventid");
      $("#myModal").modal("show");
      $.ajax({
        url: "/event/" + event_id+ "/show",
        dataType: "json",
        success: function(html) {

          $("#event_title").html(html.data.title);          
        }
     });
});

Answer 2

В вашем коде тоже есть ошибки в html.Например, имеет исправления идентификаторов в HTML.'event_id' 'event_button' ...

Попробуйте это ...

<button id="event_button-{!! $value->id !!}" data-target="event_id-{!! $value->id !!}" 
<input type="hidden" name="event_id" id="event_id-{!! $value->id !!}"

Приведенный выше код исправит проблему с идентификатором.

Теперь давайте перейдем к коду JS... Изменить событие клика:

$(document).on("click", "button.post-cata", function() {      
    var id = $("#" . $(this).data("target").val();
    ...

Нужно ли связывать теги для работы с нужным значением.Избегайте помещать идентификаторы исправлений в цикл php.Элемент html id должен быть уникальным в документе.

Итак, есть много способов сделать это.В этом случае ввод скрытого поля не требуется.Вы также можете поместить идентификатор в атрибут в теге кнопки.

<button data-id="{!! $value->id !!}...

Итак, в событии jquery click выполните:

var id = $(this).data('id');

Это проще и понятнее.