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

Question

我正在实现服装购物网站。主页显示所有服装，并在​​网格中带有单独的“添加到购物车”按钮的描述。单击按钮后，会显示模式弹出窗口，其中包含商品价格和数量。但每个模式弹出窗口仅加载第一个项目描述，而不是它们自己的描述。这是代码:

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

Answer 1

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