DOM（Javascript）show/hide divs not working

我無法使用AJAX（服務器問題！），所以我不得不依靠DOM + javascript在我的頁面上顯示或隱藏兩個div。DOM（Javascript）show/hide divs not working

用戶單擊兩個單選按鈕中的一個，並根據哪個單擊，顯示相應的div。

由於某些原因，如果使用「EU」單選按鈕但第一個div會加載，但無法使用「國際」單選按鈕來工作。第二個按鈕調用正確的腳本，傳遞變量甚至隱藏EU div，它不會顯示國際版本。

我在我的智慧結束。任何人都可以幫忙嗎？

使用Javascript：

function displayLocation(loc){ 
    alert(loc) 
    document.getElementById(loc).style.display = "block" 
    if (loc == "eu"){ 
    document.getElementById("international").style.display = "none" 
    }else{ 
     document.getElementById("eu").style.display = "none" 
    } 
}

HTML單選按鈕

<input type="radio" name="loc" style="float:left;" onclick=displayLocation("eu")> 
<input type="radio" name="loc" style="float:left;" onclick=displayLocation("international")>

Div的隱藏/顯示適當

<div id="eu" style="display:none;">European Union</div> 
<div id="international" style="display:none;">International</div>

來源

2013-03-05 useyourillusiontoo

看看我剛剛製作的fiddle。

我通過將放置在調用它的HTML後面的腳本來解決問題。還有一些風格的東西需要調整（onclick=displayLocation應該用引號括起來），但除此之外它應該適合你。

來源

2013-03-05 14:10:05 CodeMoose

我」已經做了這些變化，並沒有好的測試 – useyourillusiontoo 2013-03-05 14:24:39

您需要在點擊數屬性環繞displayLocation('xx')報價爲：'displayLocation("eu")'

http://jsfiddle.net/rvtBp/

我也建議使用，而不是事件事件綁定屬性：

<input type="radio" name="loc" style="float:left;" data-lang="eu"> 
<input type="radio" name="loc" style="float:left;" data-lang="international"> 

Array.prototype.forEach.call(document.querySelectorAll('[name="loc"]'), 
function (elem) { 
    elem.addEventListener('change', function (e) { 
     if (this.checked) { 
      displayLocation(this.dataset.lang); 
     } 
    }); 
});

http://jsfiddle.net/rvtBp/1/

來源

2013-03-05 14:10:15

- 這是不正確的 – useyourillusiontoo 2013-03-05 14:11:31

@ user2040862你能更具體嗎？ – 2013-03-05 14:14:06

<input type="radio" name="loc" style="float:left;" onclick="displayLocation(\'' + eu + '\')">

的onclick聲明應該用引號括起來.. onclick="displayLocation(\'' + eu + '\')"

我認爲它不會工作.. document.getElementById(loc).style.display = "block"

document.getElementById("+loc+").style.display = "block"

來源

2013-03-05 14:17:59 sasi

你必須改變onclick事件看起來像這樣

<input type="radio" name="loc" style="float:left;" onclick="displayLocation('eu')"> 

<input type="radio" name="loc" style="float:left;" onclick="displayLocation('international')">

來源

2013-03-05 14:18:56 Fernando

DOM（Javascript）show/hide divs not working

回答

相關問題