javascript - 模式弹出窗口不断在网格图片的每个按钮上显示第一条记录

Question

这是代码。我想要的是它不只显示每个其他记录按钮上的第一个记录信息。请有人帮忙吗？我希望它在每个记录条目上显示特定的记录数据，而不是在每个记录上显示相同的第一条记录数据。

<a href="javascript:void(0);" id="mpopupLink"><button class="update fa fa-eye" onclick="openModal1()" title="View" type="image" style="margin-top: 90px; margin-left:70px;   width: 35px; height: 35px; background: white; "  /></button> </a>

    <div id="mpopupBox" class="mpopup">
        <!-- mPopup content -->
        <div class="mpopup-content">
            <div class="mpopup-head">
                <span class="close7">×</span>

              <h2 style="font-family:Cooper Black;">Item Description</h2>

               </div>
            <div class="mpopup-main" >
    <br/>

           <img  src="<?php echo $result['image'] ?>"  style="width: 300px; height: 300px; border-radius: 25px;">

                    <p style="margin-top: -250px; margin-left: 380px; "><font size="4"><b>Product Code: <?php echo $result['id']; ?> <br/> 
                    <b>PKR <?php echo $result['price']; ?> <br/>
                    Brand: <?php echo $result['brand_name']; ?> <br/>
                    Gender: <?php echo $result['gender_name']; ?><br/> 
                    Category: <?php echo $result['category_name']; ?><br/>
                    Size: <?php echo $result['size_name']; ?> <br/>
                    Material: <?php echo $result['material_name']; ?> <br/>
                    Description: <?php echo $result['dress_description']; ?></font></b> </p> 

                    <button style="margin-left: 380px; margin-top: 20px; width: 135px;" class="button button4 add-to-cart"><i class="fa fa-shopping-cart"></i>  Add to Cart</button>
        </div>
            <div class="mpopup-foot">
               <!-- <p>created by CodexWorld</p> -->
            </div>
        </div>
    </div>
     <script type="text/javascript">
       var mpopup = document.getElementById('mpopupBox');

    // get the link that opens the mPopup
    var mpLink = document.getElementById("mpopupLink");

    // get the close action element
    var close7 = document.getElementsByClassName("close7")[0];

    // open the mPopup once the link is clicked
    mpLink.onclick = function() {
        mpopup.style.display = "block";
    }

    var imagess = document.querySelectorAll('button[title="View"]');
    for(var i=0, len = imagess.length; i < len; i++){
        imagess[i].addEventListener('click', openModal1);
    }

      function openModal1() {
          mpopup.style.display = "block";


       }


    // close the mPopup once close element is clicked
    close7.onclick = function() {
        mpopup.style.display = "none";
    }

    // close the mPopup when user clicks outside of the box

     </script>

Answer 1

您应该向 php 服务器发送 get 请求，然后使用元素的 html 属性替换模态内容