0

各ページを 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*/
4

1 に答える 1

0

同様の問題がありました。基本的にほとんどの場合、問題は要素 ID の競合にあります。DOM では、ID を 1 回だけ使用できます。ラッパーのような一意の要素のみに classNames と ID を使用することで、これを回避できます。

于 2012-04-18T19:04:42.413 に答える