Переключить имя класса

Question

У меня есть список элементов:

<ul id='list'> 
    <li id='1-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('1-i');">Toggle #1</a></li> 
    <li id='2-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('2-i');">Toggle #2</a></li> 
    <li id='3-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('3-i');">Toggle #3</a></li> 
    <li id='4-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('4-i');">Toggle #4</a></li> 
</ul> 

1. Если щелкнуть один из элементов (т.е. «Переключить # 1»), я хочу имя класса всех других предметов для изменения от видна до невидируется.

2. Если щелкнуть другой элемент теперь, я хочу, чтобы имя класса этого элемента, чтобы изменить к видимому (при отсутствии эффекта от всех других имен классов, они должны оставаться, как есть)

Простой пример: вы сначала нажали «Toggle # 4», затем «Toggle # 1». Результат должен быть:

<ul id='list'> 
    <li id='1-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('1-i');">Toggle #1</a></li> 
    <li id='2-i' class='invisible'><a href='javascript:return false;' onclick="toggle_class('2-i');">Toggle #2</a></li> 
    <li id='3-i' class='invisible'><a href='javascript:return false;' onclick="toggle_class('3-i');">Toggle #3</a></li> 
    <li id='4-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('4-i');">Toggle #4</a></li> 
</ul> 

Я попытался написать функцию JS, но поведение отличается от того, что я ожидал:

 var firstrun = true; 

     function toggle_class(id) { 
      var thisElem = document.getElementById(id); 
      var invisible = "invisible"; 
      var visible = "visible"; 
      if (thisElem.className == 'invisible' && !firstrun) { 
       thisElem.className = thisElem.className.replace(invisible, visible); 
      } else { 
       thisElem.className = thisElem.className.replace(visible, invisible); 
      } 
      if (firstrun) { 
       var children = document.getElementsByClassName('visible'); 
       for (var i = 0; i < children.length; i++) { 
        if (children[i].id != id) { 
         children[i].className = thisElem.className.replace(visible, invisible); 
        } 
       } 
      } 
      firstrun = false; 
     } 

На первом щелчке, выбранный элемент меняет свой класс невидимого, и каждый второй элемент в списке. Я не понимаю, почему это происходит. Что мне нужно изменить в коде, чтобы он работал?

Answer 1

Вопрос заключается в том, что на ваш первый запуск, вы собрать все элементы на странице с классом видимой и изменить его на невидимый, включая ваш первый элемент

if (thisElem.className == 'invisible') { 
    thisElem.className = thisElem.className.replace(invisible, visible); 
} else if(!firstrun) { 
    thisElem.className = thisElem.className.replace(visible, invisible); 
} 

может быть лучше, так как вам нужно, чтобы убедиться, что элемент не будет изменен на невидимый. Но это оставит второй, если блок продолжит работу. Это может быть разумным, чтобы сделать это вместо того, чтобы

if(!firstrun){ 
    if (thisElem.className == 'invisible') { 
     thisElem.className = thisElem.className.replace(invisible, visible); 
    } else { 
     thisElem.className = thisElem.className.replace(visible, invisible); 
    } 
} 
else{ 
    var children = document.getElementsByClassName('visible'); 
    for (var i = 0; i < children.length; i++) { 
     if (children[i].id != id) { 
      children[i].className = thisElem.className.replace(visible, invisible); 
     } 
    } 
} 

Я вроде Гадаю, почему вы используете переменные для строк, как вар невидим = «невидимый», так как его используется только один раз и то только до тех пор, и многословным, как только введя сама строка. если вы собираетесь установить переменную, можете использовать ее несколько раз с ней. также нет необходимости использовать замену, если нет большего количества классов, которые могут быть добавлены, но это просто imo. и это не должно влиять на код

Answer 2

Я думаю, что это могло бы работать (JQuery):

<ul id='list' class="first-run"> 
... 
</ul> 

$('#list > li').on('click', function() { 
    $('.first-run > li').toggleClass('visible invisible'); 
    $('.first-run').removeClass('first-run'); 
    $(this).toggleClass('visible invisible'); 
    return false; 
}); 

http://jsfiddle.net/jyes174k/

Answer 3

Вот что я сделал - я добавил класс переключения для всех элементов , Когда щелчок переключается, он добавляет невидимый класс ко всем элементам, за исключением одного щелчка. Требуется jQuery.

HTML

<ul id='list'> 
    <li id='1-i' class=' toggle'>Toggle #1</li> 
    <li id='2-i' class=' toggle'>Toggle #2</li> 
    <li id='3-i' class=' toggle'>Toggle #3</li> 
    <li id='4-i' class=' toggle'>Toggle #4</li> 
</ul> 

JAVASCRIPT

$('.toggle').click(function(){ 
    $('.toggle').toggleClass('invisible'); 
    $(this).toggleClass('invisible'); 
}); 

протестирована и работает, не знаю, почему он получил вниз проголосовали.

EDIT Добавлен способ отображения списков снова, путем его переключения. И link to a fiddle.

Answer 4

Использование кода в качестве базы (я никогда только получил это работает на самом деле, без оптимизации):

var firstrun = true; 
 

 
function toggle_class(id) { 
 
    var thisElem = document.getElementById(id); 
 
    var invisible = "invisible"; 
 
    var visible = "visible"; 
 
    if (thisElem.className == 'invisible' && !firstrun) { 
 
     thisElem.className = thisElem.className.replace(invisible, visible); 
 
     thisElem.childNodes[2].innerHTML = thisElem.className; //Added for extra visibility 
 
    } else if (thisElem.className == 'visible' && !firstrun) { 
 
     thisElem.className = thisElem.className.replace(visible, invisible); 
 
     thisElem.childNodes[2].innerHTML = thisElem.className; //Added for extra visibility 
 
    } 
 
    if (firstrun) { 
 
     var children = document.getElementById('list').children; 
 
     for (var i = 0; i < children.length; i++) { 
 
      if (children[i].getAttribute('id') != id && children[i].className != invisible) { 
 
       children[i].className = invisible; 
 
      } 
 
      children[i].childNodes[2].innerHTML = children[i].className; //Added for extra visibility 
 
     } 
 
    } 
 
    firstrun = false; 
 
    return false; 
 
}

<ul id='list'> 
 
    <li id='1-i' class="visible"><a href="#" onclick="toggle_class('1-i');">Toggle #1</a> <span id='1-is'></span></li> 
 
    <li id='2-i' class="visible"><a href="#" onclick="toggle_class('2-i');">Toggle #2</a> <span id='2-is'></span></li> 
 
    <li id='3-i' class="visible"><a href="#" onclick="toggle_class('3-i');">Toggle #3</a> <span id='3-is'></span></li> 
 
    <li id='4-i' class="visible"><a href="#" onclick="toggle_class('4-i');">Toggle #4</a> <span id='4-is'></span></li> 
 
</ul>

код, возможно, не является оптимальным, как он использует встроенные события, не требуется переменные и легко разбить логику. Но он работает (по крайней мере, сейчас)! Важно понимать код, который вы пишете, но также и то, как вы можете улучшить его.

Другие ответы, которые используют более оптимизированный код (ну, в любом случае, от @boombox). Учитесь на этом. Нет необходимости идти в jQuery только для этого, но, если вы используете много javascript, это может быть идея, поскольку это упрощает жизнь.

Кроме того, я удалил href=return false и положил оператор return в функцию. Это вызывало ошибки консоли для меня.

Answer 5

Я исправил и очистил ваш код ниже. Это должно быть намного проще и понятнее.

JavaScript:

var liElements = document.getElementById('list').children, 
    notClickedYet = true; 

// attach a click listener to each list element 
Array.prototype.forEach.call(liElements, function (element) { 
    element.addEventListener('click', function (e) { 
     var li = e.target.parentNode; 

     // run this the first time around 
     if (notClickedYet) { 
      notClickedYet = false; 
      Array.prototype.forEach.call(liElements, function (ele) { 
       ele.className = 'invisible'; 
      }); 
     } 

     // run this every time 
     li.className = li.className === 'invisible' ? 'visible' : 'invisible'; 
    }); 
}); 

HTML:

<ul id='list'> 
    <li id='1-i' class='visible'><a href='#'>Toggle #1</a></li> 
    <li id='2-i' class='visible'><a href='#'>Toggle #2</a></li> 
    <li id='3-i' class='visible'><a href='#'>Toggle #3</a></li> 
    <li id='4-i' class='visible'><a href='#'>Toggle #4</a></li> 
</ul> 

Смотрите эту работу FIDDLE.

Answer 6

Почему бы не использовать jQuery вместо этого? http://jsfiddle.net/dyys5yjd/

<ul id='list'> 
    <li id='1-i' class='visible'><a href='javascript:void(0);'>Toggle #1</a></li> 
    <li id='2-i' class='visible'><a href='javascript:void(0);'>Toggle #2</a></li> 
    <li id='3-i' class='visible'><a href='javascript:void(0);'>Toggle #3</a></li> 
    <li id='4-i' class='visible'><a href='javascript:void(0);'>Toggle #4</a></li> 
</ul> 

$(document).on('click','.visible',function(){ 
    $(this).toggle(); 
});