動態地改變對象依賴的DOM中的變量

我想有一個對象返回status true/false基於DOM中元素的存在。我無法獲得變量來實際保持加載頁面的狀態以外的狀態。我的最後一次嘗試相當愚蠢，導致Maximum call stack size exceeded，這是預期的。任何可以讓這些變量隨着DOM變化的方式？動態地改變對象依賴的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

來源

2012-09-17 ThomasReggi

我想我會得到你想要做的。我認爲您希望您爲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-17 18:31:13 Travesty3

你應該在你的代碼的開始刪除調用runNav()。它造成了無限的遞歸循環。除此之外，你的代碼看起來很好。

來源

2012-09-17 18:12:06 Pete

它的存儲狀態不正確。它總是假... – ThomasReggi

你確定你的選擇器是正確的嗎？例如，您正在尋找具有'window_stable'和'phone'類的元素？另外，你的值將根據函數最初創建的時間來設置，所以如果DOM還沒有準備好，你可能會看到「錯誤」。 – Pete

我發佈了控制檯的輸出，它顯然是正確的選擇器。 – ThomasReggi

，你所看到的問題是因爲「狀態」屬性被立即設置。因此，如果在將這些元素添加到DOM之前將導航對象初始化，那麼「狀態」將始終爲假。

如果你在訪問喜歡你「狀態」死心塌地地將一個屬性，你可以使用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);

這不是完全向後兼容，以及不完全支持IE之前的版本9.

@ Travesty3的答案將向後兼容，但它需要更改語法。就個人而言，如果您需要在9之前支持IE版本，我會推薦他的答案。

來源

2012-09-17 18:50:27 Shmiddty

非常感謝 – ThomasReggi

動態地改變對象依賴的DOM中的變量

回答

相關問題