Question

制作这个漂亮的小循环用于隐藏和显示div，作为firefox和opera中的魅力，但IE，safari和chrome说不是.... 所以我的问题是;为什么呢？

    function theme(nr){
  document.getElementById(nr).style.display = "block";
  for (i = 0;i <= 28; i++) {
   if (i != nr) {
    document.getElementById(i).style.display = "none";
   }    
  }
 }

HTML：

<select id="subject" name="subject">
<option value="no" selected>Velg tema</option>
<option value="value0" onChange="javascript:theme(0)" onClick="javascript:theme(0)" onFocus="javascript:theme(0)">value0</option>
<option value="value1" onClick="theme(1)">value1</option>
</select>

<div class="tips" id="theme_0" name="theme_0">
<div class="tipsLabel">Tips:</div>
<div class="tipsContent">
    lorem ipsum
</div>

<div class="tips" id="theme_1"  name="theme_1">
<div class="tipsLabel">Tips:</div>
<div class="tipsContent">
    more lorem ipsum
</div>

依旧......

感谢名单：）

Answer 1

你不能像这样使用id。我不应该以数字开头。

将您的代码更改为此类似内容。在元素的数字前面附加一个字符串。

function theme(nr){
  document.getElementById("myElem_" + nr).style.display = "block";
  for (i = 0;i <= 28; i++) {
   if (i != nr) {
    document.getElementById("myElem_" + i).style.display = "none";
   }    
  }
 }

来自 Basic HTML data types

ID和NAME令牌必须以a开头信（[A-Za-z]），可以遵循任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句号（“。”）

<强> 修改

将更改事件处理程序分配给select而不是选项。

<script>
function theme(elem)
{
    var selectedVal = elem.value;

    if ( document.getElementById("theme_" + selectedVal) != null )
    {
        document.getElementById("theme_" + selectedVal).style.display = "block";
    }

    for (i = 0;i <= 28; i++) 
    {
        if (i != selectedVal) 
        {
            if ( document.getElementById("theme_" + i) != null )
            {       
                    document.getElementById("theme_" + i).style.display = "none";
            }
        }    
    }
}
</script>

<select id="subject" name="subject"  onChange="javascript:theme(this)">
    <option value="-1" selected>Velg tema</option>
    <option value="0">value0</option>
    <option value="1">value1</option>
</select>

<div class="tips" id="theme_0" name="theme_0">
    <div class="tipsLabel">Tips:</div>
    <div class="tipsContent">
        lorem ipsum
    </div>
</div>

<div class="tips" id="theme_1"  name="theme_1">
    <div class="tipsLabel">Tips:</div>
    <div class="tipsContent">
        more lorem ipsum
    </div>
</div>

使用jquery的示例

<script>

$(function(){
    $("#subject").change(function(){
        var selectedVal = $(this).val();
        if ( selectedVal == -1 )
        {
            $("div.tips").show();   
        }
        else
        {
            $("div.tips").hide();
            $("#theme_" + selectedVal).show();
        }
    });
});

</script>
<select id="subject" name="subject">
    <option value="-1" selected>Velg tema</option>
    <option value="0">value0</option>
    <option value="1">value1</option>
</select>

<div class="tips" id="theme_0" name="theme_0">
<div class="tipsLabel">Tips:</div>
<div class="tipsContent">
    lorem ipsum 0
</div>
</div>

<div class="tips" id="theme_1"  name="theme_1">
    <div class="tipsLabel">Tips:</div>
<div class="tipsContent">
    more lorem ipsum 1
</div>
</div>

<强> Working Demo

Answer 2

id是一个字符串。此外，HTML标准规定ID必须以字母开头。

尝试getElementById('id-'+i)并相应更改元素的ID。

Answer 3

来自w3c http://www.w3.org/TR/html401/types.html#type-name：

ID 和 NAME 令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0- 9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句号（“。”）。

尝试将您的ID更改为以字母开头并以数字

结尾

Answer 4

您的“i”迭代器变量需要在函数中声明为本地：

function theme(nr){
  document.getElementById(nr).style.display = "block";
  for (var i = 0;i <= 28; i++) {
    if (i != nr) {
      document.getElementById(i).style.display = "none";
    }    
  }
}

如果你不这样做，那么你引用了一个名为“i”的全局变量，它（特别是在IE中）可能会导致各种各样的问题。

正如其他人所说，你还需要确保你的元素“id”值以字母或下划线开头。

Answer 5

Thanx家伙，帮了很多忙！特别是rahul提出了让我走上正确路线的onChange活动，最后;） Safari，IE和Chrome不支持标记中的onClick事件。为什么我不知道，为什么他们不能就某事达成一致;）（幻想）好吧，我正在研究来自rahul的jquery示例，希望尽快让它工作。 BTW：IE不支持，也不能在其他浏览器中使用。

再次感谢，我希望我现在能够开始工作：）

Up＆amp;跑步，感谢上帝4 Jquery !! ：D：D和大rax到rahul !! ：d

跨浏览器JS

5 个答案: