Magnific Popup点击不同商品均显示相同数据的问题求助

你的问题核心是循环生成链接时没有为每个元素绑定独立的商品数据，或者事件绑定阶段变量被覆盖，导致点击任意链接都取到最后一个商品的信息。下面给你两种直接可用的解决方案：

方案1：前端预存商品数据（无需额外AJAX请求） #

适合商品数据量不大的场景，直接把商品信息存在链接的data属性里，点击时读取并填充弹窗模板。

后端（PHP示例）生成商品链接 #

从MySQL查询后循环输出，把商品序列化为JSON存到data-product属性：

<?php
// 假设已建立MySQL连接$conn
$products = mysqli_query($conn, "SELECT id, name, price, thumbnail FROM tbl_products");
while ($product = mysqli_fetch_assoc($products)) {
    // 转义JSON避免XSS和语法错误
    $productJson = htmlspecialchars(json_encode($product));
    echo "<a href='#' class='product-link' data-product='{$productJson}'>{$product['name']}</a>";
}
?>

前端弹窗模板与JS逻辑 #

先写一个隐藏的弹窗模板，再用Magnific Popup的回调动态填充内容：

<!-- 隐藏的弹窗模板 -->
<div id="product-popup-tpl" style="display:none;">
    <img class="popup-thumb" src="" alt="商品缩略图">
    <h3 class="popup-name"></h3>
    <p class="popup-price"></p>
</div>

$(document).ready(function() {
    $('.product-link').magnificPopup({
        type: 'inline',
        inline: {
            markup: '#product-popup-tpl'
        },
        callbacks: {
            beforeOpen: function() {
                // 获取当前点击链接绑定的商品数据
                const product = JSON.parse($(this.st.el).data('product'));
                // 填充模板内容
                this.content.find('.popup-thumb').attr('src', product.thumbnail);
                this.content.find('.popup-name').text(product.name);
                this.content.find('.popup-price').text(`$${product.price}`);
            }
        }
    });
});

方案2：AJAX动态获取商品数据（适合大数据量） #

如果商品数据较多，不想把所有数据都写到页面里，可以通过商品ID请求后端接口获取详情。

后端接口（get-product.php） #

根据ID查询并返回商品JSON：

<?php
$productId = intval($_GET['id']); // 强制转整数防止SQL注入
$conn = mysqli_connect('localhost', 'user', 'pass', 'dbname');
$product = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM tbl_products WHERE id = {$productId}"));
echo json_encode($product);
?>

后端生成链接（仅存ID） #

<?php
while ($product = mysqli_fetch_assoc($products)) {
    echo "<a href='#' class='product-link' data-product-id='{$product['id']}'>{$product['name']}</a>";
}
?>

前端JS逻辑 #

点击时通过AJAX获取对应商品数据并渲染弹窗：

$(document).ready(function() {
    $('.product-link').magnificPopup({
        type: 'ajax',
        ajax: {
            settings: function() {
                // 获取当前点击商品的ID
                const productId = $(this.st.el).data('product-id');
                return {
                    url: 'get-product.php',
                    data: { id: productId },
                    dataType: 'json'
                };
            },
            callback: function(productData) {
                // 直接用返回的数据生成弹窗内容
                this.content = `
                    <img src="${productData.thumbnail}" alt="商品缩略图">
                    <h3>${productData.name}</h3>
                    <p>$${productData.price}</p>
                `;
            }
        }
    });
});

问题根源说明 #

你之前的代码之所以出现内容重复，通常是因为：

• 循环中用了全局变量存储商品信息，循环结束后变量保留最后一次循环的值
• 事件绑定没有正确捕获当前元素的上下文，导致所有点击事件都引用同一个数据

上面两种方案都通过this.st.el获取当前点击的DOM元素，确保每次点击都能拿到对应商品的信息，从根本上解决了内容重复的问题。

内容的提问来源于stack exchange，提问作者Milot25