Javascript 显示项目所有按钮上第一个项目详细信息的模式弹出窗口

我正在实施服装购物网站。主页显示所有带有描述的衣服，并带有单独的“添加到购物车”按钮。点击按钮，模式弹出窗口显示项目价格和数量。但是每个模式弹出窗口只加载第一个项目描述，而不是它们自己的描述。代码如下：

<button class="update fa fa-shopping-cart " id="mpopupLink1" onclick="openModal2()" title="Add to Cart" type="image"  style=" margin-top: 90px; margin-left:110px;   width: 35px; height: 35px; background: white; "  /></button>

// here is starting modal popup
<div id="mpopupBox1" class="mpopup1">
    <!-- mPopup content -->
    <div class="mpopup1-content">
        <div class="mpopup1-head">
            <span class="close8">×</span>
            <h2 style="font-family:Cooper Black;"><center>Add to Cart</center></h2>    
        </div>
        <div class="mpopup1-main" >
            <br/>
            <br/>         
            <p>
                <b>Product Code: <?php echo $row['id']; ?></b>
            </p> 
            <div style="margin: 30px 40px 40px 250px;">
                <p id="demo">
                    <font size="6" ><b>PKR</b></font>
                    <input name="price" type="number" id="price" value="<?php echo $row['price']; ?>" readonly> </font>
                    <br/>
                </p> 
            </div>
            <div style="margin: -75px 60px 40px 0px;" >
                <label><font size="4">Quantity</font></label>   
            </div>  
            <input  style="margin-left: 335px; margin-top: -40px; width: 135px;" type="submit" name="add_to_cart" class="button button4 add-to-cart" value="Add to Cart">
        </div>
        <div class="mpopup1-foot">
            <!-- <p>created by CodexWorld</p> -->
        </div>
    </div>
</div>

// here is javascript function
<script type="text/javascript">
    var mpopup1 = document.getElementById('mpopupBox1');

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

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

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

    var images1 = document.querySelectorAll('button[title="Add to Cart"]');
    for(var i=0, len = images1.length; i < len; i++){
        images1[i].addEventListener('click', openModal2);
    }

    function openModal2() {
        mpopup1.style.display = "block";          
    }

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

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

</script>

//这里是开始模式弹出窗口
×
添加到购物车





产品代码：


PKR

//这里是开始模式弹出窗口
×
添加到购物车





产品代码：


PKR

//这里是开始模式弹出窗口
×
添加到购物车





产品代码：


PKR
根据您的代码，显然只显示第一项的数据。不只是显示/隐藏弹出窗口，而是传递项目的id，从数据库获取数据并加载模式弹出窗口。或者使模式弹出id动态&单击“添加到购物车”按钮显示相关弹出窗口。@AAT如何使id动态？你能帮忙吗？你在使用foreach循环中的模式弹出窗口吗？不，我没有使用foreach循环，然后在onclick=“openModal2（$row['id']）中传递每个项目的id。在openModal2（）中，获取与该特定项相关的数据，并根据您的代码将其动态绑定到模态popup。显然，只显示第一项的数据。不只是显示/隐藏弹出窗口，而是传递项目的id，从数据库获取数据并加载模式弹出窗口。或者使模式弹出id动态&单击“添加到购物车”按钮显示相关弹出窗口。@AAT如何使id动态？你能帮忙吗？你在使用foreach循环中的模式弹出窗口吗？不，我没有使用foreach循环，然后在onclick=“openModal2（$row['id']）中传递每个项目的id。在openModal2（）中，获取与该特定项相关的数据，并将其动态绑定到模态popupwhat是openModal2函数中的行\u id？要添加到Cart的项的id？它仍在工作。如果您能够完成openmodal2函数@AATUpdate，我可以与您共享我的数据库详细信息，您的代码包括for loop for display项。我将给它一个trywhat是openmodal2函数中的row_id？要添加到CartIt的项的id它仍不能工作。如果您能够完成openmodal2函数@AATUpdate，我可以与您共享我的数据库详细信息，您的代码包括for loop for display项。我要试一试
<button class="update fa fa-shopping-cart " id="mpopupLink1" onclick="openModal2($row['id'])" title="Add to Cart" type="image"  style=" margin-top: 90px; margin-left:110px;   width: 35px; height: 35px; background: white; "  /></button>

// here is starting modal popup
<div id="mpopupBox1" class="mpopup1">
    <!-- mPopup content -->
    <div class="mpopup1-content">
        <div class="mpopup1-head">
            <span class="close8">×</span>
            <h2 style="font-family:Cooper Black;"><center>Add to Cart</center></h2>    
        </div>
        <div class="mpopup1-main" >
            <br/>
            <br/>         
            <p>
                <b>Product Code: </b><span id="row_id"><?php echo $row['id']; ?></span>
            </p> 
            <div style="margin: 30px 40px 40px 250px;">
                <p id="demo">
                    <font size="6" ><b>PKR</b></font>
                    <input name="price" type="number" id="price" value="<?php echo $row['price']; ?>" readonly> </font>
                    <br/>
                </p> 
            </div>
            <div style="margin: -75px 60px 40px 0px;" >
                <label><font size="4">Quantity</font></label>   
            </div>  
            <input  style="margin-left: 335px; margin-top: -40px; width: 135px;" type="submit" name="add_to_cart" class="button button4 add-to-cart" value="Add to Cart">
        </div>
        <div class="mpopup1-foot">
            <!-- <p>created by CodexWorld</p> -->
        </div>
    </div>
</div>

// here is javascript function
<script type="text/javascript">
    var mpopup1 = document.getElementById('mpopupBox1');

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

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

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

    var images1 = document.querySelectorAll('button[title="Add to Cart"]');
    for(var i=0, len = images1.length; i < len; i++){
        images1[i].addEventListener('click', openModal2);
    }

    function openModal2(id) {
      //write the code to fetch data from Database using that id. I am not sure about your database details. So please do it yourself.
        document.getElementById('row_id').value = name(javascript variable);// like this push value to every element you want to show
        mpopup1.style.display = "block";          
    }

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

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

</script>