Question

我无法使用AJAX（服务器问题！）所以我不得不依靠DOM + javascript来显示或隐藏我页面上的两个div。

用户点击两个单选按钮中的一个，根据哪个单击，将显示相应的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 id="eu" style="display:none;">European Union</div>
 <div id="international" style="display:none;">International</div>

Answer 1

看看我刚刚制作的fiddle。

我能够通过在调用它的HTML之后放置脚本来解决问题。还有一些风格的东西要调整（onclick=displayLocation应该在引号中）但除此之外它应该适合你。

Answer 2

您需要在onclick属性中围绕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/

Answer 3

<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"

Answer 4

你必须改变onclick事件看起来像这样

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

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

DOM（Javascript）显示/隐藏div无法正常工作

4 个答案: