Javascript 动态更改依赖于DOM的对象中的变量

Javascript 动态更改依赖于DOM的对象中的变量,javascript,dom,object,memory,Javascript,Dom,Object,Memory,我希望有一个根据DOM中元素的存在返回statustrue/false的对象。除了加载页面的状态外,我无法让变量实际维护其他状态。我的上一次尝试相当愚蠢,导致最大调用堆栈大小超出了预期值。我能用DOM改变这些变量吗 var navigation = function runNav(){ runNav(); var navigation = { globe : { element : $("#icons .globe"), status : (functio

我希望有一个根据DOM中元素的存在返回
status
true/false的对象。除了加载页面的状态外,我无法让变量实际维护其他状态。我的上一次尝试相当愚蠢,导致
最大调用堆栈大小超出了预期值。我能用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

您应该删除代码开头对
runNav()
的调用。它导致了一个无限递归循环。除此之外,您的代码看起来还不错。

您应该删除代码开头对
runNav()
的调用。它导致了一个无限递归循环。除此之外,您的代码看起来还不错。

我想我明白了您的意图。我想您希望在每次访问
status
属性时运行为
status
定义的函数

据我所知,我认为你不能仅仅把它变成一种财产。我认为你需要把它变成一个函数

像这样:()


我想我明白你的意思了。我想您希望在每次访问
status
属性时运行为
status
定义的函数

据我所知,我认为你不能仅仅把它变成一种财产。我认为你需要把它变成一个函数

像这样:()


您看到的问题是,正在立即设置“status”属性。因此,如果在将这些元素添加到DOM之前初始化导航对象,“status”将始终为false

如果像访问属性一样死心塌地地访问“状态”,则可以使用
对象。defineProperty
模式:

这不是完全向后兼容的,在9版之前的IE中也不完全支持


@Travesty3的答案是向后兼容的,但它需要改变语法。就个人而言,如果您需要支持9之前的IE版本,我建议您使用他的答案。

您看到的问题是因为“status”属性正在立即设置。因此,如果在将这些元素添加到DOM之前初始化导航对象,“status”将始终为false

如果像访问属性一样死心塌地地访问“状态”,则可以使用
对象。defineProperty
模式:

这不是完全向后兼容的,在9版之前的IE中也不完全支持


@Travesty3的答案是向后兼容的,但它需要改变语法。就个人而言,如果您需要支持9点之前的IE版本,我会推荐他的答案。

您确定您的选择器正确吗?例如,您正在查找同时具有
窗口_stable
phone
类的元素?此外,您的值将根据函数最初创建的时间进行设置,因此如果DOM尚未准备好,您可能会看到
false
。我从控制台发布了输出,它显然是正确的选择器。然后您可能在DOM完全加载之前声明了您的函数。您的函数声明是否在
$(文档).ready(函数(){…})
中?或者至少在
的底部?如果没有,那么您可能只是在检查元素是否存在时仓促行事。您确定您的选择器正确吗?例如,您正在查找同时具有
窗口_stable
phone
类的元素?此外,您的值将根据函数最初创建的时间进行设置,因此如果DOM尚未准备好,您可能会看到
false
。我从控制台发布了输出,它显然是正确的选择器。然后您可能在DOM完全加载之前声明了您的函数。您的函数声明是否在
$(文档).ready(函数(){…})
中?或者至少在
的底部?如果没有,你可能只是在匆忙检查元素是否存在。
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());
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);