2011-09-14 38 views
0

我有以下的javascript函数负责togglling的基础上传递的参数我的HTML页面的一些元素:变量的作用域

function toggleDeliveryOption(source) { 
    if(source.toLowerCase() === "maildeliveryoption") 
    { 
     var fs = document.getElementById("mailDeliveryOptionFS"); 
    } 
    else if(source.toLowerCase() === "faxdeliveryoption") 
    { 
     var fs = document.getElementById("faxdeliveryoptionFS"); 
    } 
    else if(source.toLowerCase() === "emaildeliveryoption") 
    { 
     var fs = document.getElementById("emaildeliveryoptionFS"); 
    } 
    if(fs) 
    { 
     if(fs.style.display == "none") 
      fs.style.display = "block"; 
     else 
      fs.style.display = "none" 
    } 
} 

现在weired行为是,如果来源是第一个(maildeliveryoption)它的工作原理和fs将持有id为mailDeliveryOptionFS的元素,但对于其他两个分支中的其他两个元素,fs的计算结果为null,因此它不会进入if条件!我认为这个问题与JavaScript中的变量范围有关,但我不知道是什么问题

+0

这应该不是问题...源代码如何设置? –

+0

@Joseph源是基于点击事件复选框 邮件 –

+1

你可以显示HTML,因为它将需要?我相信你可能在JavaScript代码中拼错了你的ID。 ID区分大小写。 'mailDeliveryOptionFS'在其他两个不是的情况下是骆驼式的。 –

回答

0

将您的代码更改为此,以正确声明本地变量fs一次。然后,您可以可靠地在代码的末尾测试以确定它是否已设置。以前的代码可能会因变量提升而起作用,但它不是推荐的编码方式。一个变量的作用域是它在声明的功能。

function toggleDeliveryOption(source) { 
    var fs = null; 
    if(source.toLowerCase() === "maildeliveryoption") 
    { 
     fs = document.getElementById("mailDeliveryOptionFS"); 
    } 
    else if(source.toLowerCase() === "faxdeliveryoption") 
    { 
     fs = document.getElementById("faxdeliveryoptionFS"); 
    } 
    else if(source.toLowerCase() === "emaildeliveryoption") 
    { 
     fs = document.getElementById("emaildeliveryoptionFS"); 
    } 
    if (fs) 
    { 
     if (fs.style.display == "none") { 
      fs.style.display = "block"; 
     } else { 
      fs.style.display = "none"; 
     } 
    } 
} 

的其他潜在这里小问题,就是fs.style.display可能不会被预先设置为阅读风格变量这种方式只返回明确的内嵌样式的HTML(它不返回事情通过CSS设置)。如果您想知道显示设置的实际状态,则必须使用包含CSS设置的计算样式。在windows中获得计算样式是不同的,因此需要多行代码才能完成。这是我使用像YUI或jQuery这样的框架的原因之一,因为它为我处理所有这些跨浏览器混乱。

顺便说一句,你可以简化代码像这样的很多:

function toggleDeliveryOption(source) { 
    var fs = document.getElementById(source); 
    if (fs) { 
     if (fs.style.display == "none") { 
      fs.style.display = "block"; 
     } else { 
      fs.style.display = "none"; 
     } 
    } 
} 

为了使这个简单的版本的工作,只是通过期权的ID切换:

toggleDeliveryOption("mailDeliveryOptionFS"); 

如果你想实际的显示状态包括CSS设置,那么你需要使用这个:

// add IE compatibility function for getComputedStyle 
if (!window.getComputedStyle) { 
    window.getComputedStyle = function(el, pseudo) { 
     this.el = el; 
     this.getPropertyValue = function(prop) { 
      var re = /(\-([a-z]){1})/g; 
      if (prop == 'float') prop = 'styleFloat'; 
      if (re.test(prop)) { 
       prop = prop.replace(re, function() { 
        return arguments[2].toUpperCase(); 
       }); 
      } 
      return el.currentStyle[prop] ? el.currentStyle[prop] : null; 
     } 
     return this; 
    } 
} 


function toggleDeliveryOption(source) { 
    var fs = document.getElementById(source); 
    if (fs) { 
     var style = getComputedStyle(fs, null); 
     if (style.display == "none") { 
      fs.style.display = "block"; 
     } else { 
      fs.style.display = "none"; 
     } 
    } 
} 
+0

基于OP,替代方案应该是'source.toLowerCase()+'FS'',并在'none'和''(空字符串)之间切换,而不是* block *。 – RobG

+0

'source.toLowerCase()+'FS''不适用于所有选项,例如'mailDeliveryOptionFS'同时将'style.display'设置为空字符串只是将其恢复为默认状态,并不保证显示或隐。如果这就是你想要的,OP可以使用它,但是他们的原始代码是设置'block'或'none',这可能是他们真正想要的。 – jfriend00

+0

关于案件,是的,同意。将display属性设置为空字符串可让元素采用默认或继承的显示值,将其设置为特定值意味着知道应该是什么 - 有13个不同的值,并且某些浏览器对同一元素具有不同的值(例如表格单元格在IE中是块和Firefox表格单元格)。设置为阻止(或任何可见值)也不能保证可见性,因为父级可能是隐藏的或者是不可分开的。 – RobG

1

也许y你不在寻找正确的身份证件。 ID是区分大小写的,即使您将条件与小写ID进行比较,实际ID仍然是骆驼大小写(如第一个元素,因为它是唯一被发现的元素)。

function toggleDeliveryOption(source) 
{ 
    var source = source.toLowerCase(), 
     id, 
     fs; 

    switch (source) 
    { 
     case "maildeliveryoption": 
      id = "mailDeliveryOptionFS"; 
      break; 

     case "faxdeliveryoption": 
      id = "faxDeliveryOptionFS"; 
      break; 

     case "emaildeliveryoption": 
      id = "emailDeliveryOptionFS"; 
      break; 
    } 

    fs = document.getElementById(id); 

    if (fs) 
    { 
     if (fs.style.display == "none") 
     { 
      fs.style.display = "block"; 
     } 
    } 
} 
0

看起来不错(尽管使用开关看起来更好)。我不知道这些电话是benig用来做什么的,但你的第一个和第二个电话之间确实存在大写差异。你在美丽的骆驼案例中有“mailDeliveryOptionFS”,但“faxdeliveryoptionFS”和“emaildeliveryoptionFS”不是。这可能是你的问题?将它们分别更改为“faxDeliveryOptionFS”和“emailDeliveryOptionFS”?