Javascript 模式弹出窗口仅在所有项目按钮上填充第一个项目数据

我正在实施布匹购物网站，我上传布匹项目的图像和说明从管理面板。在主页上，我正在检索库存中的所有布料项目，并使用while循环进行显示。为了查看详细信息，我放置了“查看按钮”，单击该按钮可打开模式弹出窗口并显示项目的完整描述。但我面临的问题是，单击项目的每个按钮仅在所有项目按钮的模式弹出窗口中显示第一个项目描述。我希望每个项目按钮都显示项目描述。但它会不断填充每个按钮上的第一项数据

代码：

<?php
$link = mysql_connect("localhost", "root", "") or die("Cannot Connect to the database!");
mysql_select_db("login", $link) or die("Cannot select the database!");
$sql = "SELECT * FROM add_stock";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {?>     
  <div class="grid_element"> 
    <div class="show-image">
      <form method="post" action="" id="myform" >
        <img  src="<?php echo $row['image'] ?>" name="image" onclick="openModal()" id="image" name="image1" target="_parent">
        <figcaption>
          <b>Product Code: <?php echo $row['id']; ?> <br/>
          <?php echo $row['dress_description']; ?> <br/> 
          PKR <?php echo $row['price']; ?></b>
        </figcaption>
      </form>
      <!-- view button -->
      <button class="update fa fa-eye" id="popupview" onclick="openModal1()"  title="View" type="image"  /></button>

      <!-- View Item modal popup -->
      <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 $row['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 $row['id']; ?> <br/>
                PKR <?php echo $row['price']; ?> <br/>
                Brand: <?php echo $row['brand_name']; ?> <br/>
                Gender: <?php echo $row['gender_name']; ?><br/> 
                Category: <?php echo $row['category_name']; ?><br/>
                Size: <?php echo $row['size_name']; ?> <br/>
                Material: <?php echo $row['material_name']; ?> <br/>
                Description: <?php echo $row['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("popupview");
        // 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";
        }
      </script>
    </div>
  </div>

“name=“image”onclick=“openModal（）”id=“image”name=“image1”target=“\u parent”>
产品代码：



PKR
×
项目说明


“style=”宽度：300px；高度：300px；边框半径：25px；“>
产品代码：

PKR

品牌：

性别：

类别：

大小：

材料：

说明：

添加到购物车
var mpopup=document.getElementById（'mpopupBox'）；
//获取打开mPopup的链接
var mpLink=document.getElementById（“popupview”）；
//获取close-action元素
var close7=document.getElementsByClassName（“close7”）[0]；
//单击链接后打开mPopup
mpLink.onclick=函数（）{
mpopup.style.display=“块”；
}
var imagess=document.querySelectorAll（'button[title=“View”]”）；
对于（var i=0，len=imagess.length；i

1）。停止使用mysql函数

2）为什么要在每个文件上连接数据库连接。创建一个公共数据库文件，其中写入数据库连接代码并包含在每个文件中。否则，当数据库、用户名或密码被更改时，您必须在每个文件中更改它。因此，为了避免这种情况，创建一个公共db文件

db.php

<?php
$link = mysql_connect("localhost", "root", "") or die("Cannot Connect to the database!");
mysql_select_db("login", $link) or die("Cannot select the database!");
?>

<?php
include("db.php");
$result = mysql_query("SELECT * FROM add_stock");
while ($row = mysql_fetch_assoc($result)) {?>
  <div class="grid_element"> 
    <div class="show-image">
      <form method="post" action="" id="myform" >
        <img  src="<?php echo $row['image'] ?>" name="image" onclick="openModal()" id="image" name="image1" target="_parent">
        <figcaption>
          <b>Product Code: <?php echo $row['id']; ?> <br/>
          <?php echo $row['dress_description']; ?> <br/> 
          PKR <?php echo $row['price']; ?></b>
        </figcaption>
      </form>

      <button class="update fa fa-eye openPopUp" data-url="ajax_pop_up.php?id=<?php echo $row['id'];?>" title="View" type="image"  /></button>
    </div>
  </div>
<?php }?>

<style>
  .displayBlock{display:block;}
  .displayNone{display:none;}
</style>

<div id="mpopupBox" class="mpopup displayNone">

</div>

<script>
  //For Opening Pop Up
  $(document.body).on('click', '.openPopUp', function () {
    $("#mpopupBox").removeClass("displayNone").addClass("displayBlock");
    $.ajax({url:$(this).attr('data-url'),cache:false,success:function(result){
        $("#mpopupBox").html(result);
    }});
  });

  //For Closing Pop Up
  $(document.body).on('click', '.close7', function () {
    $("#mpopupBox").removeClass("displayBlock").addClass("displayNone");
  });
</script>

类似问题

快速链接

通过它。如果有任何问题，请随时提问。

1）。停止使用mysql函数

2）为什么要在每个文件上连接数据库连接。创建一个公共数据库文件，其中写入数据库连接代码并包含在每个文件中。否则，当数据库、用户名或密码被更改时，您必须在每个文件中更改它。因此，为了避免这种情况，创建一个公共db文件

db.php

<?php
$link = mysql_connect("localhost", "root", "") or die("Cannot Connect to the database!");
mysql_select_db("login", $link) or die("Cannot select the database!");
?>

<?php
include("db.php");
$result = mysql_query("SELECT * FROM add_stock");
while ($row = mysql_fetch_assoc($result)) {?>
  <div class="grid_element"> 
    <div class="show-image">
      <form method="post" action="" id="myform" >
        <img  src="<?php echo $row['image'] ?>" name="image" onclick="openModal()" id="image" name="image1" target="_parent">
        <figcaption>
          <b>Product Code: <?php echo $row['id']; ?> <br/>
          <?php echo $row['dress_description']; ?> <br/> 
          PKR <?php echo $row['price']; ?></b>
        </figcaption>
      </form>

      <button class="update fa fa-eye openPopUp" data-url="ajax_pop_up.php?id=<?php echo $row['id'];?>" title="View" type="image"  /></button>
    </div>
  </div>
<?php }?>

<style>
  .displayBlock{display:block;}
  .displayNone{display:none;}
</style>

<div id="mpopupBox" class="mpopup displayNone">

</div>

<script>
  //For Opening Pop Up
  $(document.body).on('click', '.openPopUp', function () {
    $("#mpopupBox").removeClass("displayNone").addClass("displayBlock");
    $.ajax({url:$(this).attr('data-url'),cache:false,success:function(result){
        $("#mpopupBox").html(result);
    }});
  });

  //For Closing Pop Up
  $(document.body).on('click', '.close7', function () {
    $("#mpopupBox").removeClass("displayBlock").addClass("displayNone");
  });
</script>

类似问题

快速链接

---

---

通过它。如果出现任何问题，请随时询问。

同一id不能多次使用

id=“popupview”onclick=“openModal1（）”

如何解决此问题@URFUSION有多种方法可以做到这一点。1.使用ajax获取信息并打开模型。2.通过

onclick=“openModal1（this）”

中的

this

，并根据

获取信息此
目标我已经尝试了很多次，但失败了。请编辑此代码？要感谢@urfusion，从过去4小时到现在，我一直在处理同一类问题，同一id不能多次使用
id=“popupview”onclick=“openModal1（）”
如何解决此问题@URFUSION有多种方法可以做到这一点。1.使用ajax获取信息并打开模型。2.通过
onclick=“openModal1（this）”
中的
this
，并根据
此
目标获取信息。我已经尝试了很多次，但失败了。您能编辑此代码吗？要感谢@urfusion，从过去的4个小时到现在，我一直在处理同样的问题。它仍然不起作用。事实上，现在查看按钮不起作用。你复制了整个代码了吗。因为，这是正确的代码@ShoaibSharoon@Nana Partykar先生我在等你reply@ShoaibSharoon：别叫我先生。我和其他人一样。你的弹出窗口没有打开？对的您在控制台中检查过了吗，出现了什么错误？谢谢@Nana Partykarits仍然不工作，事实上现在视图按钮不工作。您复制了整个代码了吗。因为，这是正确的代码@ShoaibSharoon@Nana Partykar先生我在等你reply@ShoaibSharoon：别叫我先生。我和其他人一样。你的弹出窗口没有打开？对的你们在控制台登记了吗？有什么错误吗？谢谢@Nana Partykar