ajax导航中的jquery ajax导航

Question

我将此代码用于我的主站点导航，它通过 ajax 加载每个页面并具有后备功能。

$(function() {
    var newHash = '',
        $contentWrap = $("#content-wrap");
    $("nav").on("click", "a", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $(window).on('hashchange', function() {
        newHash = window.location.hash.substring(1);
        $contentWrap.load(newHash + " #content");
    });
    $(window).trigger('hashchange');
});​

这很好，但是当我从另一个页面加载内容时，例如 about.html，我还加载了更多按钮以在#content-wrap 中进行导航。

所以#content-wrap 现在包含一个数据框和更多用于导航的按钮。当我点击新导航时，它需要在数据框中加载新数据。

首先我尝试复制上面的脚本，但使用新的锚点，但是我遇到了冲突。

我认为我需要某种 if 语句，我已经研究过 if (function !== undefined) 之类的东西，但不知道该怎么做。

我不确定我自己的解释有多好，我对解释它感到困惑，但基本上我想将上面的代码与下面基本相同的代码结合起来而不会发生冲突。

$(function() {
    var newHash = '',
        $contentWrap = $("#content-wrap"),
        $aboutWrap = $("#a-wrap");
    $("#content-wrap").on("click", "a", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $(window).on('hashchange', function() {
        newHash = window.location.hash.substring(1);
        $aboutWrap.load(newHash + " #a-content");
    });
    $(window).trigger('hashchange');
});​

更新：有点效果，但改变了我的计划

$(function() {

var newHash = '',
        $nav = $("nav a"),
        $boxBtn = '',
        $aboutWrap = '',
        $contentWrap = $("#content-wrap");

$("nav").on("click", "a", function() {

    $(this).addClass("nav-click");

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

    return false;
});

$contentWrap.on("click", "a", function() {

    $(this).addClass("btn-click");

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

    return false;
});

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

    var     $aboutWrap = $("#a-wrap"),
                $boxBtn = $("div.btn a");

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


    if ($nav.hasClass("nav-click")){

    $contentWrap.load(newHash + " #content");
    $nav.removeClass("nav-click");
    };

    if ($boxBtn.hasClass("btn-click")){

        $aboutWrap.load(newHash + " #a-content");
        $boxBtn.removeClass("btn-click");
    };
});

$(window).trigger('hashchange');


}); /*/end*/

Answer 1

我遇到了类似的问题，基本上在大多数情况下，问题在于元素 ID 冲突。在 DOM 中，您只能使用一次 ID。您可以通过仅对包装器等唯一元素使用类名和 ID 来解决此问题。