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

Question

我正在实现布料购物网站，在其中我从管理面板上传布料及其图像和描述。在主页上，我正在检索所有库存的布料元素并使用 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>

Answer 1

1) The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead 。停止使用 mysql 函数。

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

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!");
?>

3) 整个页面的 ID 不能相同。所以，相应地改变它。

YourPage.php

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

4) 在同一目录下创建一个通用的ajax弹出文件，弹出内容将出现在该文件中。

ajax_pop_up.php

(如果您打算在此处更改文件名，请在YourPage.php页面的data-url中更改，两者是相互关联的)

<?php
include("db.php");
$result = mysql_query("SELECT * FROM add_stock WHERE id=".$_GET['id']);
while ($row = mysql_fetch_assoc($result)){?>
<!-- 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>
<?php }?>

类似问题

1. GET PHP variable value from HTML data-id
2. Passing data via Modal Bootstrap and getting php variable?

快速链接

Can an html element have multiple ids?

经历一下。而且，如果出现任何问题，请随时询问。