0

statusDOM 内の要素の存在に基づいて true/false を返すオブジェクトが必要です。読み込まれたページの状態以外の状態を実際に維持するための変数を取得できません。私の最後の試みはかなりばかげていてMaximum call stack size exceeded、予想通りの結果になりました。これらの変数をDOMで変更する方法はありますか?

var navigation = function runNav(){
  runNav();
  var navigation = {
    globe : {
      element : $("#icons .globe"),
      status : (function(){
        return ($(".window_stable.globe").length == 1) ? true : false;
      })()
    },
    cart : {
      element : $("#icons .cart"),
      status : (function(){
        return ($(".window_stable.cart").length == 1) ? true : false
      })()
    },
    phone : {
      element : $("#icons .phone"),
      status : (function(){
        return ($(".window_stable.phone").length == 1) ? true : false
      })()
    }
  }
  return navigation;
}();

例

navigation.cart.status
false
-- Enabled the element
navigation.cart.status
false
($(".window_stable.cart").length == 1) ? true : false
true
4

3 に答える 3

2

runNav()コードの先頭にあるへの呼び出しを削除する必要があります。無限再帰ループを引き起こしています。それ以外は、コードは問題なく見えます。

于 2012-09-17T18:12:06.700 に答える
1

私はあなたがやろうとしていることを理解していると思います。statusプロパティにアクセスするたびに、定義した関数を実行したいと思いますstatus。

私の知る限り、それをプロパティにするだけではできないと思います。関数にする必要があると思います。

このように: ( jsFiddle )

var navigation = {
    globe: {
        element: $("#icons .globe"),
        getStatus: function() { return ($(".window_stable.globe").length > 0); }
    },
    cart: {
        element: $("#icons .cart"),
        getStatus: function() { return ($(".window_stable.cart").length > 0); }
    },
    phone: {
        element: $("#icons .phone"),
        getStatus: function() { return ($(".window_stable.phone").length > 0); }
    }
};

alert("status = "+ navigation.cart.getStatus());
于 2012-09-17T18:31:13.713 に答える
1

あなたが見ている問題は、「ステータス」プロパティがすぐに設定されているためです。したがって、これらの要素が DOM に追加される前にナビゲーション オブジェクトが初期化されると、「ステータス」は常に false になります。

プロパティのように「ステータス」にアクセスすることに固執している場合は、次のObject.definePropertyパターンを使用できます: http://jsfiddle.net/TFVFS/

var navigation = (function runNav(){
    var navigation = {
        globe : {
            element : $("#icons .globe")
        },
        cart : {
            element : $("#icons .cart")
        },
        phone : {
            element : $("#icons .phone")
        }
    };

    Object.defineProperty(navigation.globe, "status", {
        get:function(){return $(".window_stable.globe").length == 1 ? true : false;}   
    });
    Object.defineProperty(navigation.cart, "status", {
        get:function(){return $(".window_stable.cart").length == 1 ? true : false;}   
    });
    Object.defineProperty(navigation.phone, "status", {
        get:function(){return $(".window_stable.phone").length == 1 ? true : false;}   
    });
    return navigation;
})();

console.log(navigation.cart.status);
console.log(navigation.globe.status); 
console.log(navigation.phone.status);

これは完全な下位互換性がなく、バージョン 9 より前の IE では完全にサポートされていません。

@ Travesty3 の回答は下位互換性がありますが、構文を変更する必要があります。個人的には、IE 9 より前のバージョンをサポートする必要がある場合は、彼の回答をお勧めします。

于 2012-09-17T18:50:27.563 に答える