Crossbrowser 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.我不应该以数字开头.

将您的代码更改为这样的代码.在元素的数字前面附加一个字符串.

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而不是选项.

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

工作演示