时间戳

首页 > 解决方案 > 单击时显示特定的 php 数据

javascript - 单击时显示特定的 php 数据

问题描述

我已经使用 PHP 显示了数据库中的所有项目，但我想制作一个弹出窗口，显示单击的数据，它可以通过单击item-container或order按钮触发，无需刷新或转到另一个链接。我对每个项目都有一个唯一的 ID，但我真的不明白如何在单击时获取数据然后将其显示在弹出窗口中。

<?php foreach($menu as $row) : ?>
    <div class="item">
        <img src="mcd/<?= $row["image"]; ?>" alt="" class="item-image">
        <div class="item-detail">
            <div class="item-name"><?= $row["item"]; ?></div>
            <div class="item-price"><?= $row["price"]; ?></div>
            <div class="item-order">
                <!-- <button class="order"> -->
                Order >>
            <!-- </button> -->
            </div>
        </div>
    </div>
<?php endforeach; ?>
<!-- The popup -->
<div class="popup-container hide">
    <div class="popup-wrapper">
        <div class="popup-image">
            <img src="this-image.jpg" alt="">
        </div>
        <div class="popup-name">
            This Name
        </div>
        <div class="popup-price">
            This Int
        </div>
        <div class="order-container">
            <div class="value-container">
                <button class="minusBtn"><img src="icon/minus.png" alt="" width="30px"></button>
                <div class="value">1</div>
                <button class="plusBtn"><img src="icon/plus.png" alt="" width="30px"></button>
            </div>
            <button class="orderBtn">Add To Cart</button>
        </div>
    </div>
</div>

编辑：在此处添加了一些 js 代码。它基本上只是一个简单的弹出事件。

function order() {
    let items = document.querySelectorAll('.item');
    let popup = document.querySelector('.popup-container');
    let orderBtn = document.querySelector('.orderBtn');
    let cartIcon = document.querySelector('.cart-icon');
    items.forEach((item) => {
        item.addEventListener('click', ()=>{
            popup.style.display = 'block';
            window.addEventListener('click', (e)=>{
                if (orderBtn.contains(e.target)) {
                    popup.style.display = 'none';
                    cartIcon.src = 'icon/cart-bill.png';
                }
                if (e.target.classList.contains('popup-container')) {
                    document.querySelector('.popup-container').style.display = 'none';
                }
            })
        })
    });
} order();

标签： javascriptphp

解决方案

当您有多个要显示的项目时，您可以为每个项目生成一个“唯一”弹出 div 并使用 javascript 函数来显示和隐藏弹出 div 。

在您的情况下，您可以将.popup-container hidediv 放在 foreach 循环中并给它一个唯一的 id，例如$row["item"]假设每个项目都是唯一的。确保hide弹出 div 上的类实际上隐藏了 div，例如：

隐藏{显示：无；}

然后在按钮上放置一个onclick事件，该事件将显示和隐藏弹出 div 并将弹出唯一 id 传递给函数，因此在您的情况下：

<button class="order" onClick="popupFunction('<%= $row["item"] %>')">

现在只需编写一个 javascript 函数来处理 onclick 事件以显示和隐藏弹出 div，在此示例中，我将弹出 div 唯一 ID 分配给itemId，然后我使用它来获取弹出 div 并将其分配给popupContainer. 然后我只是通过检查它是否包含hide类来检查 div 是否隐藏 - 如果它包含我删除类以显示弹出 div 如果它不然后我添加类以隐藏弹出 div 。

function popupFunction(itemId) {
  var popupContainer = document.getElementById(itemId);
  if (popupContainer.classList.contains('hide')) {
    popupContainer.classList.remove('hide');
  } else {
    popupContainer.classList.add('hide');
  }
}

推荐阅读