Question

我正在实施布料购物网站，我在其中使用管理面板上的图片和说明上传布料项目。在主页上我正在检索库存中的所有布料项目并使用while循环显示。为了查看我已经放置的详细信息＆＃34;查看按钮＆＃34;在点击打开模态弹出窗口并显示该项目的完整描述。但我面临的问题是，点击项目的每个按钮仅显示所有项目按钮上的模态弹出窗口中的第一个项目描述。我希望每个项目按钮都应该显示项目拥有描述。但它会在每个按钮上填充第一项数据。

代码：

<?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）为什么要在每个文件上连接数据库连接。创建一个公共db文件，其中写入数据库连接代码并包含在每个文件中。否则，当数据库或用户名或密码被更改时，您必须在每个文件中更改它。因此，要避免它，请创建一个公共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!");
?>

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

类似问题

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

快速链接

Can an html element have multiple ids?

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

模态弹出窗口仅保留所有项目按钮

1 个答案: