Question

对于此特定挑战，我需要为两个给定列表中的所有 <li> 元素切换已创建类的成员资格（同时）。如果列表中的 <li> 元素当前未分配给该类，则会为其分配该类;如果当前为任一列表中的 <li> 元素分配了该类，则会删除该类。每次单击一个按钮时，都会添加和删除该类（例如，在第一次单击时，可以添加该类 - 然后在第二次单击时，可以删除该类，等等。）

我被要求在普通JavaScript中专门执行此特定任务。虽然我知道jQuery会更容易，但我被要求用普通的JavaScript来完成这项任务。

当我按下按钮时，正在按预期应用css类（此处，font-family，font-size和font-stretch属性正在被更改）;但是，当我第二次点击按钮时，没有任何变化（例如正在删除的课程），一切都恢复正常。

如果有人能指出我调整当前代码的非jQuery方式，请告诉我。

感谢您的帮助:)。

以下是此任务的相关HTML，CSS和JavaScript：

的 HTML： 的

<ul id="newZealandList">
    <li>Auckland</li>
    <li>Wellington</li>
    <li>Christchurch</li>
    <li>Tauranga</li>
    <li>Dunedin</li>
</ul>

<ul id="usaList">
    <li>Los Angeles</li>
    <li>San Francisco</li>
    <li>San Diego</li>
    <li>Denver</li>
    <li>Boulder</li>
</ul>

<button id="modifyListsToggle">Change Lists - Toggle</button>

的 CSS： 的

.modifyListElements{
    font-family:"Comic Sans MS", cursive;
    font-size:24px;
    font-stretch:extra-expanded;
}

的的JavaScript 的

var newZealandListItems =  document.getElementById("newZealandList").getElementsByTagName("li");
var usaListItems = document.getElementById("usaList").getElementsByTagName("li");

function addClass(obj)
{
    obj.className="modifyListElements";
}

function removeClass(obj)
{
    obj.className = "";
}


function toggleClass()
{
    for (var i = 0; i < newZealandListItems.length; i++) {
        if(i.className != "modifyListElements") {
            //newZealandListItems[i].className = "modifyListElements";
            addClass(newZealandListItems[i]);

        }
        else
        {
            //newZealandListItems[i].className = "";
            removeClass(newZealandListItems[i]);
        }
    }

    for (var i = 0; i < usaListItems.length; i++) {
        if(i.className != "modifyListElements") {
            //usaListItems[i].className = "modifyListElements";
            addClass(usaListItems[i]);
        }
        else
        {
            //usaListItems[i].className = "";
            removeClass(usaListItems[i]);
        }
    }
}

var modifyListsToggle = document.getElementById("modifyListsToggle");
modifyListsToggle.onclick = toggleClass;

Answer 1

问题在这里

for (var i = 0; i < newZealandListItems.length; i++) {
        if(i.className != "modifyListElements") {
//con....

在这里

 for (var i = 0; i < usaListItems.length; i++) {
        if(i.className != "modifyListElements") {
//con....

我只是循环计数器变量，你需要使用它访问该索引处的项目，所以应该是

    for (var i = 0; i < newZealandListItems.length; i++) {
            if (newZealandListItems[i].className != "modifyListElements") {

//con..

和

for (var i = 0; i < usaListItems.length; i++) {
    if (usaListItems[i].className != "modifyListElements") {

//con..

另一方面，如果使用多个类，则此代码可能会出现问题，因为.className属性将返回元素上的所有类。如果将来可能存在这个问题，我会继续使用className.replace（'modifyListElements'，''）进行删除（这样它只会删除该类，而不会删除其他类）。如果有多个类，那么className上的一个类的测试也将无效。在这种情况下，追求测试，然后.replace可能是解决方案。

Answer 2

代码检查类名中的一个小错误。我修改了你的代码它运行正常。请检查

http://jsfiddle.net/kRva7/。

var newZealandListItems =  document.getElementById("newZealandList").getElementsByTagName("li");
var usaListItems = document.getElementById("usaList").getElementsByTagName("li");

function addClass(obj)
{
    obj.className="modifyListElements";
}

function removeClass(obj)
{
    obj.className = "";
    console.log(obj.className);
}


function toggleClass()
{
    for (var i = 0; i < newZealandListItems.length; i++) {
        var item = newZealandListItems[i];

    if(item.className != "modifyListElements") {
        //newZealandListItems[i].className = "modifyListElements";
        addClass(item);

    }
    else
    {
        //newZealandListItems[i].className = "";
        removeClass(item);
    }
}

for (var i = 0; i < usaListItems.length; i++) {
    var item = usaListItems[i];            
    if(item.className != "modifyListElements") {
        //usaListItems[i].className = "modifyListElements";
        addClass(item);
    }
    else
    {
        //usaListItems[i].className = "";
        removeClass(item);
    }
}
}


    var modifyListsToggle = document.getElementById("modifyListsToggle");
    modifyListsToggle.onclick = toggleClass;

Answer 3

你能做到这一点最简单的方法（虽然IE支持有问题）是这样的：

var btn = document.getElementById('modifyListsToggle'), 
    lists = document.querySelectorAll('ul');

btn.addEventListener('click', function(e) {
  for(var i = 0; i < lists.length; i++) {
    var items = lists[i].querySelectorAll('li');
    for(var j = 0; j < items.length; j++) {
      items[j].classList.toggle('modifyListElements');
    }
  }
}, false);

demo

querySelectorAll()仅受IE8 +
addEventListener()仅受IE9 +
classList仅受IE10支持

为列表元素打开和关闭类 - CSS和ONLY Javascript

3 个答案: