Как создать уникальные идентификаторы для CSS моделей JQ в цикле PHP

Question

Итак, мне интересно, как установить уникальные идентификаторы для каждой модели, которую l oop создает

Я просматриваю пользовательский тип сообщения, чтобы создать контент на основе каждой существующей публикации. Я хочу отображать всплывающие модальные окна с полным содержанием, а не только с выдержкой, но и с l oop. Я не знаю, как сделать каждый модальный идентификатор уникальным, а затем прочитать его в Javascript.

Вот l oop:

 <div class="row">
           
             <?php
                    $review = new WP_Query(array('post_type' => 'review', 'posts_per_page'=>'-1', 'order_by' => 'post_date', 'order' => 'DSD'));
                    if($review->have_posts()) : while ($review->have_posts()) : $review->the_post();
            
                    
            ?>
            <div class="col-lg-3 monial-block mg-top-m">
            
                
            
                    <div class="flex-r">
                        
                        <?php 
                        $rating = get_post_meta(get_the_ID(), "wpcf_stars", true);
                        
                         for ($x = 0; $x < $rating; $x++) :
                        ?>
                          <span class="fa fa-star checked"></span>
                         <?php endfor; ?>

                        <i class="fa fa-bookmark" aria-hidden="true"></i>
                    </div>
        
                    <p>
                     <?php the_excerpt() ?>
                    </p>
                    <button id="myBtn">Read More</button>
                    <div class="flex-r names">
                        <hr class="test-hr">
                        <h4 class="test-name">
                            <?php the_title() ?>
                        </h4>
                    </div>
                    <div id="myModal" class="modal">

                  
                        <div class="modal-content">
                        <span class="close">&times;</span>
                                <?php the_title() ?>
                            <?php the_content(); ?>
                        </div>

                        </div>
            </div>
            <?php endwhile; ?>

            <?php else : ?>

                <p><?php __('No Reviews'); ?></p>

            <?php endif; ?>
        
        </div>

    </div>

Вот JavaScript

    var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Вот CSS

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

Возможно, мне даже не нужны уникальные идентификаторы, но я почти уверен, что проблема в этом. 1-й элемент - единственный, у которого есть рабочая модель, остальные имеют содержимое, но не всплывают, когда я нажимаю на них.

Answer 1

Это можно сделать так:

выше for ($x ... добавить

$modalCount = 0;

Затем изменить кнопку и модальный html вот так:

<button id="myBtn<?php echo $modalCount++; ?>" data-modal="myModal<?php echo $modalCount; ?>">Read More</button>
...
<div id="myModal<?php echo $modalCount; ?>" class="modal">

Это добавит число к текущему идентификатору, поэтому идентификаторы будут выглядеть следующим образом

• myModal0
• myModal1
• ...

Затем вы можете выбрать все кнопки с атрибутом data-modal

// since you are using jQuery
$("button[data-modal]").click(() => {
    const modalId = $(this).data("modal"); // this could make issues
    // if it does, use .attr("data-modal")
    const modal = $(modalId);  // this is the modal you are looking for
})