跨浏览器JS

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。 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";
   }    
  }
 }

来自基本HTML数据类型

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

编辑

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

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

工作演示

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

谢谢大家，帮了很多忙！ 尤其是rahul提出了onChange事件，这最终使我走上了正确的路;）Safari，IE和Chrome不支持标记中的onClick事件。 为什么我不知道，为什么他们不都能在某些事情上达成共识；）（幻想）好吧，我正在研究rahul的jquery示例，希望它能尽快开始工作。 顺便说一句：IE中不支持，并且在其他浏览器中也不起作用。

所以，再次感谢thanx，我希望我现在可以开始工作:)

启动并运行，感谢上帝4 Jquery ！！ ：D：D和rahul的大伙伴！！ ：D