Question

我想分开这些功能。它们应该在点击事件上单独工作：

第一个功能

 $("ul.nav li").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

newHash = window.location.hash.substring(1);

        if (newHash) {
           ACTION A
      });
$(window).trigger('hashchange');
 });

第二功能

 $("ul.subnav li").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

newHash = window.location.hash.substring(1);

        if (newHash) {
           ACTION B
      });
$(window).trigger('hashchange');
 });

这是行动A中发生的事情：

 $mainContent
                .find(".maincontent")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " .maincontent", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $(".nav a").removeClass("active");
                        $(".nav a[href="+newHash+"]").addClass("active");
                    });
                });

问题在于，如果我单击第二个函数的链接，则第一个函数将始终触发。

我正在尝试做的详情：

首先，我在.php上构建我的网站，以便在没有JavaScript的情况下提供服务。现在我想动态加载“maincontent”。所以我找到了我正在使用的脚本：

http://css-tricks.com/6336-dynamic-page-replacing-content/

如果仅想要加载“maincontents”，它确实做得很好。

但我的网站在某些页面上有子导航，我想加载子内容。在.php这些网站使用包含。所以我得到的内容是： href =“page2.php？page = sub1”

因此，当我点击子链接时，它们也会动态加载，但脚本也会在整个maincontent加载区域加载。所以它并没有真正按.load（）加载内容，但是包含的子内容确实出现了。

所以我认为只是将这个功能分开。第一个简单地加载主要内容，第二个用于子导航以仅刷新子内容区域。我甚至不理解这个脚本如何动态加载包含内容，因为链接是直接的page2.php？page = sub1链接。所有动态加载的内容通常看起来像“#index”，没有结尾“.php”。

一些快速的历史：

我正在尝试获得最佳的页面结构。为非JavaScript用户提供.php，然后在其上放置一些动态加载内容。始终以实现每个页面的浏览器导航和浏览器链接（用于共享）为目标。

我不是jQuery专家。到目前为止，我所学到的只有反复试验和一些逻辑思维。但当然，我缺乏JavaScript的基础知识。

所以我的“逻辑”问题：

如何告诉“nav”链接只执行“$（window）.bind”-Event，并告诉“subnav”链接仅执行“$（window）.bin”-event。< / p>

这是正确的想法吗？

由于我已经在过去18小时内尝试解决它，我会感激任何帮助。

谢谢。

重要：

使用第一个函数我不仅仅加载maincontent而且我还在每个链接上更改页面上的div。因此，对于任何可能希望将其组合在一起的解决方案，它将无法工作，因为它们应该在页面的不同区域上执行不同的操作。这就是为什么我真的需要使用每个nav / subnav点击来调用window.bind。

谁能告诉我怎么样？

Answer 1

Melros，在第二个函数中，您绑定到事件hashchange2，这是不正确的。相反，您仍然想要绑定到hashchange。而不是：

$(window).bind('hashchange2', function() {
...
});

的尝试：

$(window).bind('hashchange', function() { ... });

如果要为事件订阅命名空间，可以使用句点（.）然后命名空间后缀绑定的事件的结尾：

$("#test").bind("click.namespace1", function() { }); $("#test").bind("click.namespace2", function() { });

Answer 2

好的，似乎您想要在单击.nav内的链接时执行操作A，而在单击.subnav内的链接时执行操作B.

您可以将这些操作放在事件处理程序中。此外，如果.subnav嵌套在.nav内，则必须限制您的选择器：

// consider only direct children
$("ul.nav > li").delegate("a", "click", function() {
    var href = $(this).attr("href");

    if(window.location.hash !== href) {
        Action A

        window.location.hash = $(this).attr("href");
    }

    return false;
});

// consider only direct children
$("ul.subnav > li").delegate("a", "click", function() {
    var href = $(this).attr("href");

    if(window.location.hash !== href) {
        Action B

        window.location.hash = $(this).attr("href");
    }

    return false;
});

我不认为听hashchange事件会对你有所帮助，因为在这两种情况下都会触发这个事件而你无法知道哪个元素是负责任的（你可能会以某种方式，但为什么会让它变得过于复杂？）。

Answer 3

这就是我遇到的解决方案：

在理解haschange-event不需要对它做任何事情之后（只要你不想让子内容也可以加入书签）我只是为子内容添加了一个新的加载函数：

$(function(){

            $("ul.linkbox li a").live('click', function (e) {
            newLink = $(this).attr("href");
            e.preventDefault();

                $(".textbox").find(".subcontent").fadeTo(200,0, function() {

                    $(".textbox").load(newLink +  " .subcontent" , function() {

                        $(".subcontent").fadeTo(200,1, function() {



                        }); 
                    }); 

                $("#wrapper").css("height","auto");
                $("ul.linkbox li a").removeClass("activesub");
                $("ul.linkbox li a[href='"+newLink+"']").addClass("activesub");

                });

        });

});

如何分离两个jQuery函数

3 个答案: