2

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

我被要求专门用普通的 JavaScript 来完成这个特定的任务。虽然我知道 jQuery 会是更简单的选择，但我被要求只使用普通的 JavaScript 来完成这项任务。

当我按下按钮时，css 类正在按预期应用（这里，字体系列、字体大小和字体拉伸属性正在改变）；但是，当我第二次单击该按钮时，没有任何变化（例如，类被删除），一切都恢复正常。

如果有人可以指出我调整当前代码的非 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;
4

3 回答 3

2

问题在这里

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....

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

    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 可能是解决方案。

于 2012-09-21T04:33:42.300 回答
1

代码检查 classname 中的一个小错误。我修改了你的代码，它工作正常。请检查一下

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;

​</p>

于 2012-09-21T04:34:27.630 回答
0

你可以做到这一点的最简单的方法（虽然 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);

演示

于 2012-09-21T04:51:58.503 回答