我有一个项目清单：
[TestFixtureSetUp]
public void FixtureSetUp()
{
StructuremapMvc.Start();
WebApp.Start<Startup>(BaseAddress);
}
如果您单击其中一个项目（即“切换＃1”），我希望所有其他项的类名从可见更改为不可见。
如果您现在点击另一个项目，我希望此项目的类名称更改为 visible （对所有其他类名称没有影响，它们应保持原样）< / p>
简单示例：您首先单击“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='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>
我尝试编写一个js函数，但行为与我的预期不同：
<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>
首次单击时，所选项目将其类更改为不可见，列表中的每个第二项也是如此。我不明白为什么会这样。我需要更改代码才能使其正常工作？
答案 0 :(得分：0)
问题在于，在第一次运行时，您收集页面上所有可见类的元素，并将其更改为不可见，包括您的第一个元素
if (thisElem.className == 'invisible') {
thisElem.className = thisElem.className.replace(invisible, visible);
} else if(!firstrun) {
thisElem.className = thisElem.className.replace(visible, invisible);
}
可能会更好，因为您需要确保元素不会变为不可见。但这将使第二块if块继续运行。这样做可能是谨慎的
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 invisible =＆＃34; invisible＆＃34;因为它只使用了一次，而且就像输入字符串本身一样冗长而冗长。如果您要设置变量，也可以多次使用它。也不需要使用替换，除非有更多的类可能被添加，但这只是imo。它不应该影响代码
答案 1 :(得分：0)
使用您的代码作为基础（我只是让它真正起作用，没有优化）：
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语句放在函数中。它导致了我的控制台错误。
答案 2 :(得分：0)
我修复并清理了下面的代码。它应该更简单，更容易理解。
<强> 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 。
答案 3 :(得分：-1)
我认为这可能有用（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;
});
答案 4 :(得分：-1)
这就是我所做的 - 我为所有项目添加了一个切换类。 单击切换时，它会将不可见的类添加到除单击的项目之外的所有项目。需要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。
答案 5 :(得分：-1)
为什么不使用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();
});