Кроссбраузер 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>

и так далее ...

Thanx:)

Answer 1

Вы не можете использовать идентификаторы вот так. Идентификатор не должен начинаться с цифры.

Измените свой код на что-то вроде этого. Добавьте строку перед числами для элементов.

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]), дефисы ("-"), подчеркивание ("_"), двоеточия (":") и точки (".")

Редактировать

Назначьте обработчик события изменения для выбора вместо опции.

<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 гласит, что идентификатор должен начинаться с буквы.

Попробуйте getElementById('id-'+i) и соответственно измените идентификаторы элементов.

Answer 3

от w3c http://www.w3.org/TR/html401/types.html#type-name:

ID и ИМЯ токены должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9] ), дефисы ("-"), подчеркивания ("_"), двоеточия (":") и точки (".").

Попробуйте изменить свои идентификаторы, чтобы они начинались с буквы и заканчивались цифрой

Answer 4

Спасибо, ребята, очень помогли! Особенно Рахул за то, что поднял событие onChange, которое, наконец, привело меня на правильный курс;) Safari, IE и Chrome не поддерживают событие onClick в теге. Почему я не знаю, почему они не все могут договориться о чем-то;) (фантазия) Ну, я смотрю на пример jquery от rahul, надеясь, что он скоро заработает. КСТАТИ: в IE не поддерживается и не работает в других браузерах.

Итак, еще раз спасибо, и я надеюсь, что теперь я заработаю:)

Работай, слава Богу, 4 Jquery! : D: D и большое спасибо рахул! : D

Answer 5

Ваша переменная итератора "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" вашего элемента начинаются с буквы или подчеркивания.