2

この特定の課題では<li>、2 つの指定されたリスト内のすべての要素に対して、既に作成されたクラスのメンバーシップを (同時に) 切り替える必要があります。どちらのリストの<li>要素にも現在クラスが割り当てられていない場合は、クラスが割り当てられます。いずれかのリストの<li>要素に現在クラスが割り当てられている場合、そのクラスは削除されます。ボタンがクリックされるたびに、クラスが追加および削除されます (たとえば、最初のクリックでクラスが追加され、2 回目のクリックでクラスが削除されるなど)。

この特定のタスクを、特に通常の JavaScript で行うように依頼されました。jQuery の方が簡単なオプションであることはわかっていますが、通常の JavaScript だけでこのタスクを実行するように依頼されました。

ボタンを押すと、css クラスが期待どおりに適用されます (ここでは、font-family、font-size、および font-stretch プロパティが変更されています)。ただし、ボタンを 2 回目にクリックすると、何も変更されず (クラスが削除されるなど)、すべてが正常に戻ります。

現在のコードを調整する 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 の 1 つのクラスのテストも機能しません。この場合、テストを実行してから .replace を実行すると、おそらく解決策になります。

于 2012-09-21T04:33:42.300 に答える
1

クラス名をチェックするコードの小さなバグ。私はあなたのコードを修正しました。これをチェックしてください

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 に答える