變量的作用域

我有以下的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中的變量範圍有關，但我不知道是什麼問題

來源

2011-09-14 K' '

這應該不是問題...源代碼如何設置？ –

@Joseph源是基於點擊事件複選框郵件 –

你可以顯示HTML，因爲它將需要？我相信你可能在JavaScript代碼中拼錯了你的ID。 ID區分大小寫。 'mailDeliveryOptionFS'在其他兩個不是的情況下是駱駝式的。 –

將您的代碼更改爲此，以正確聲明本地變量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"; 
     } 
    } 
}

來源

2011-09-14 20:40:52 jfriend00

基於OP，替代方案應該是'source.toLowerCase（）+'FS''，並在'none'和''（空字符串）之間切換，而不是* block *。 – RobG

'source.toLowerCase（）+'FS''不適用於所有選項，例如'mailDeliveryOptionFS'同時將'style.display'設置爲空字符串只是將其恢復爲默認狀態，並不保證顯示或隱。如果這就是你想要的，OP可以使用它，但是他們的原始代碼是設置'block'或'none'，這可能是他們真正想要的。 – jfriend00

關於案件，是的，同意。將display屬性設置爲空字符串可讓元素採用默認或繼承的顯示值，將其設置爲特定值意味着知道應該是什麼 - 有13個不同的值，並且某些瀏覽器對同一元素具有不同的值（例如表格單元格在IE中是塊和Firefox表格單元格）。設置爲阻止（或任何可見值）也不能保證可見性，因爲父級可能是隱藏的或者是不可分開的。 – RobG

也許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"; 
     } 
    } 
}

來源

2011-09-14 20:42:34

看起來不錯（儘管使用開關看起來更好）。我不知道這些電話是benig用來做什麼的，但你的第一個和第二個電話之間確實存在大寫差異。你在美麗的駱駝案例中有「mailDeliveryOptionFS」，但「faxdeliveryoptionFS」和「emaildeliveryoptionFS」不是。這可能是你的問題？將它們分別更改爲「faxDeliveryOptionFS」和「emailDeliveryOptionFS」？

來源

2011-09-14 20:43:43 Primus202

變量的作用域

回答

相關問題