Question

我正在尝试使用带有jquery的关闭函数来关闭弹出式DIV，它在我添加DIV的位置函数之前工作，我做的事情必须打破了函数...我猜它是的在某个地方出现语法错误，那里有任何新鲜的眼睛愿意看一眼？

工作地点位于www.masterfade.com/maptest

以下是代码：

$(document).ready(function () {

    $('.lightbox').click(function (event) {
        event.preventDefault();
        $('.backdrop, #box').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('#box').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, #box').css('display', 'block');
    });

    $('.lightbox2').click(function (event) {
        event.preventDefault();
        $('#box2').css({
            left: function () {
                return event.pageX - $(this).width();
            },
            top: function () {
                return event.pageY - $(this).height();
            }
        });
        $('.backdrop, #box2').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('#box2').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, #box2').css('display', 'block');
    });
});

$('.backdrop, #box2').animate({
    'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
    'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');


$('.close').click(function () {
    close_box();
});

$('.backdrop').click(function () {
    close_box();
});



function close_box() {
    $('.backdrop, #box, #box2').animate({
        'opacity': '0'
    }, 300, 'linear', function () {
        $('.backdrop, #box, #box2').css('display', 'none');
    });
}

Answer 1

所以，

我浏览了您的网站，并使用谷歌Chrome开发者工具（控制台） iv'e手动调用$('.lightbox').click()和close_box()，它似乎正在作为例外工作没有抛出任何javascript异常。

但是，我不确定你是否理解什么不起作用。

我强烈建议您将Chrome浏览器与开发人员工具结合使用，这将使您的网络开发更轻松。

使用此功能，您可以监控javascript错误并逐行调试代码。

祝你好运

Answer 2

我认为你的事件绑定和动画函数是在DOM元素加载之前调用的。因此，事件绑定将不起作用。

我希望以下代码能够正常运作。

$(document).ready(function () {

    $('.lightbox').click(function (event) {
        event.preventDefault();
        $('.backdrop, #box').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('#box').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, #box').css('display', 'block');
    });

    $('.lightbox2').click(function (event) {
        event.preventDefault();
        $('#box2').css({
            left: function () {
                return event.pageX - $(this).width();
            },
            top: function () {
                return event.pageY - $(this).height();
            }
        });
        $('.backdrop, #box2').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('#box2').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, #box2').css('display', 'block');
    });


    $('.backdrop, #box2').animate({
        'opacity': '.50'
    }, 300, 'linear');
    $('#box2').animate({
        'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop, #box2').css('display', 'block');

    // following lines are edited

    $('.close,.backdrop').click(close_box);

    function close_box() {
        $('.backdrop, #box, #box2').animate({
            'opacity': '0'
        }, 300, 'linear', function () {
            $('.backdrop, #box, #box2').css('display', 'none');
        });
    }
});

关闭函数在Jquery中不起作用

2 个答案: