Question

我使用以下内容将页面中的某些内容加载到简单的灯箱中。

但是，如果在class="ajax-page-content"的网页上有多个链接，点击链接A加载内容A，但点击链接B也会加载内容A.

如何确保为每个链接加载正确的内容？

我是否需要使用location.reload或其他内容重新加载内容？

$('.ajax-page-content').click(function(){  

    var $button = $(this);
    var url = $button.attr('href');

    if ($('#addlee-lightbox-content').length > 0) {

        $('#addlee-lightbox-content').show();
        $('body').addClass('lightbox-open');
    } else {
        $.get(url, '', function (data) {

            var $content = $(data).find('.col');
            var html_content = $content.html();

            var lightbox =
            '<div id="lightboxcontent">' +
                '<div class="lightbox-content animated fadeInDown">' +
                    '<a href="#" class="lightbox-close">&nbsp;</a>' +
                    html_content +
                '</div>' +
                '<div class="lightbox-bg">&nbsp;</div>' +
            '</div>';

            $('body').append(lightbox).addClass('lightbox-open');

        });
    }

    return false;
});

Answer 1

由于脚本中的逻辑而发生错误你写的东西如下：

如果存在容器，请将其显示为否则，创建容器，填充它，显示它
因此，在第二次单击时，将执行第一个条件
编辑：逻辑的草图应该是：

点击链接 - 获取ajax数据
使用ajax数据填充容器
show modal

更改是使用click事件将多个容器添加（并填充）到您的页面。每个容器应保存单击的ajax数据所以类似的东西：
单击LinkA，获取dataA，填充containerA，打开modalA
单击LinkB，获取dataB，填充containerB，打开modalB
点击LinkA，打开modalA

使用jQuery重新加载ajax内容

1 个答案: