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

您必须将产品详细信息绑定到按钮（输入类型图像）作为自定义属性。单击该按钮时，它将获取该按钮的数据属性。

以下是一个工作示例：

＆＃13;

// your dynamic popup box
var mpopup1 = document.getElementById('mpopupBox1');

// popup box close button
var close8 = document.getElementsByClassName("close8")[0];

// open modal and update content
function openModal2(item) {
  var image = item.getAttribute('data-image');
  var price = item.getAttribute('data-price');
  var code = item.getAttribute('data-code');

  document.getElementById('price').value = price;
  document.getElementById('image').src = image;
  document.getElementById('code').innerHTML = code;
  mpopup1.style.display = "block";
}

// close the mPopup once close element is clicked
close8.onclick = function() {
  mpopup1.style.display = "none";
}

＆＃13;

<input class="update fa fa-shopping-cart" id="mpopupLink1" onclick="openModal2(this)" title="Add to Cart" type="image" style="margin-top: 90px; margin-left:110px; width: 35px; height: 35px; border: 1px solid" data-image="https://gloimg.gamcdn.com/G/pdm-product-pic/Clothing/2016/10/15/source-img/20161015092246_60853.jpg"
  data-code="1122333" data-price="100" src="https://cdn4.iconfinder.com/data/icons/dress-2/60/long_dress_1-256.png" />

<input class="update fa fa-shopping-cart " id="mpopupLink1" onclick="openModal2(this)" title="Add to Cart" type="image" style=" margin-top: 90px; margin-left:110px; width: 35px; height: 35px; border: 1px solid" data-image="https://s-media-cache-ak0.pinimg.com/736x/58/bf/0c/58bf0c2eff5c91d5908480de69072e89--dresses-on-sale-a-line-dresses.jpg"
  data-price="200" data-code="445566" src="https://images.vexels.com/media/users/3/131762/isolated/lists/f8bc76e174b4c43d78c962f7e6f06f07-pink-women-s-cloth.png" />


<div id="mpopupBox1" class="mpopup1" style="display:none">
  <!-- 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">
      <figure>
        <img src="" alt="The Pulpit Rock" width="304" height="228" id="image">
      </figure>
      <br/>
      <br/>
      <p><b>Product Code: <span id="code"></span></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="5000" 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>

＆＃13;

模态弹出窗口的JavaScript函数仅适用于第一个元素

1 个答案: