Question

创建这个ajax风格的wordpress组合主题，我有点坚持如何做最后一件小事。

基本上可以说，点击右上角的“关于”链接，它会将该页面的内容加载到div中。现在，一旦那些点击了如何指定再次点击该链接不再加载内容？

现在你会考虑使用长度，这不是真正的问题。

以下是正在进行的主题http://themes.thefinishedbox.com/portfolio/

的链接

以下是用于顶部导航的JavaScript：

$(function() {
    $('#navigation ul > li a').each(function() {

        $(this).click(function(e) {

            $.ajaxSetup ({  
                cache: false  
            });

            e.preventDefault();

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

            var $loader = '<div id="whiteLoader" />';

            if($('#page').length == 0) {

                $('<div id="page" />').insertAfter('#header');

                $('#page').queue(function() {
                    $(this).animate({height: '120px'}, 300);
                    $(this).html($loader);
                    $(this).animate({backgroundColor: '#fff'}, 300);
                    $(this).dequeue();                    
                });

                $('#page').queue(function() {
                    $('#page').load($href + ' #pageEntry', function() {
                        var $height = $('#pageEntry').height();
                        var $h = $height + 16;
                        $(this).animate({height: $h + 'px'}, 600, function() {
                            $(this).css({height: 'auto'});
                        });
                        // This is the sort of thing I'm trying to achieve
                        // is it out of scope? Not sure of the correct way
                        // to achieve this.
                        e.click(function() { return false; }); 
                    });
                    $(this).dequeue();
                });

            } else {

                $('#pageEntry').animate({height: 0}, 600, function() {

                    $(this).remove();

                    $('#page').queue(function() {
                        $(this).animate({height: '120px'}, 300);
                        $(this).html($loader);
                        $(this).animate({backgroundColor: '#fff'}, 300);
                        $(this).dequeue();                    
                    });

                    $('#page').queue(function() {
                        $('#page').load($href + ' #pageEntry', function() {
                            var $height = $('#pageEntry').height();
                            var $h = $height + 16;
                            $(this).animate({height: $h + 'px'}, 600, function() {
                                $(this).css({height: 'auto'});
                            });
                        });
                        $(this).dequeue();
                    });

                });
            }

        });

    });
});

现在不要过于担心else语句，请参考注释行，我做得对吗？超出范围？当然有人之前遇到过这个问题。

非常感谢任何帮助。

p.s我知道很多代码都可以缩小，稍后我会这样做。

Answer 1

您可以使用one()函数来确保事件处理程序仅运行一次。或者，您可以使用data()将布尔值绑定到元素，指示元素当前是否“活动”（即显示其内容）。作为参考，这两个函数都是JQuery函数。

Answer 2

有很多方法可以做到这一点，例如使用one会更好。但是，您现有的代码似乎有一个问题：e是一个事件参数，而不是被单击的元素。你可以这样做：

$(function() {
    $('#navigation ul > li a').each(function() {

        $(this).click(function(e) {

            $.ajaxSetup ({  
                cache: false  
            });

            e.preventDefault();

            var $href = $(this).attr('href'), $thelink = $(this); 

            var $loader = '<div id="whiteLoader" />';

            if($('#page').length == 0) {

                $('<div id="page" />').insertAfter('#header');

                $('#page').queue(function() {
                    $(this).animate({height: '120px'}, 300);
                    $(this).html($loader);
                    $(this).animate({backgroundColor: '#fff'}, 300);
                    $(this).dequeue();                    
                });

                $('#page').queue(function() {
                    $('#page').load($href + ' #pageEntry', function() {
                        var $height = $('#pageEntry').height();
                        var $h = $height + 16;
                        $(this).animate({height: $h + 'px'}, 600, function() {
                            $(this).css({height: 'auto'});
                        });
                         $thelink.unbind(e);
                    });
                    $(this).dequeue();
                });

            } else {

                $('#pageEntry').animate({height: 0}, 600, function() {

                    $(this).remove();

                    $('#page').queue(function() {
                        $(this).animate({height: '120px'}, 300);
                        $(this).html($loader);
                        $(this).animate({backgroundColor: '#fff'}, 300);
                        $(this).dequeue();                    
                    });

                    $('#page').queue(function() {
                        $('#page').load($href + ' #pageEntry', function() {
                            var $height = $('#pageEntry').height();
                            var $h = $height + 16;
                            $(this).animate({height: $h + 'px'}, 600, function() {
                                $(this).css({height: 'auto'});
                            });
                        });
                        $(this).dequeue();
                    });

                });
            }

        });

    });
});

可能超出范围单击函数jquery

2 个答案: