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. 如果你現在點擊其他項目，我想這個項目的類名稱更改爲可見（與所有其他類名沒有任何影響，他們應該保持原樣）

簡單的例子：您首先點擊「切換＃4」，然後點擊「切換＃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); 
     } 
    } 
} 

我還挺想知道爲什麼你使用變量VAR一樣串隱形=「隱形」，因爲其只用一次，那只是長和羅嗦剛剛鍵入字符串本身。如果你打算設置一個變量，不妨使用它多次。也不需要使用替換，除非有更多的類可能會被添加，但這只是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'); 
}); 

測試和工程，不知道爲什麼它得到了下投票。

編輯添加了一種方法，通過使其切換，再次顯示列表。和一個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而去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(); 
});