2

宛先がonClickイベントで機能する関数があります。

たとえば、4 つの Span 要素と 4 つの Div 要素があります。スパンは、これらの Div を「開きたい」タブ ボタンです。

最初のスパン onClick は、「ブロック」の最初の Div の style.display を「none」から (open) 変更し、次のスパンについても同様に変更します。

このコードは非常にうまく機能しますが、要素のデザインのみが変更されます。

function activateSup(s) {
  var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
  var spans = workTable.getElementsByTagName("span");
  var supDivs = workTable.getElementsByClassName("supDiv");

  for (var i = 0; i < spans.length; i++) {
    spans[i].style.backgroundColor = "";
    spans[i].style.border = "";
  }

  s.style.backgroundColor = "#5eac58";
  s.style.border = "2px solid #336633";
}

以下のコードを関数に追加して、目的を達成しようとしましたが、機能しません。

  var getIndex = function(s) {
    for (var index = 0; s != s.parentNode.childNodes[index]; index++);
    return index;
  }
  for (var d = 0; d < supDivs.length; d++) {
    if (getIndex == d) {
        supDivs[d].style.display = "block";
    }
    else {
        supDivs[d].style.display = "none";
    }
  }
4

1 に答える 1

1

あなたが何をしようとしているのか正確にはわかりませんが、私が気づいたことの1つは次のとおりです。

var getIndex = function(s) { /* .... */ }

for (var d = 0; d < supDivs.length; d++) {
    if (getIndex == d) {
        supDivs[d].style.display = "block";
    }
    else { /* ... */ }
}

このコードは と比較getIndexしています。これは、関数呼び出しの結果( のような整数)ではなくd、整数 ( d) を関数と比較していることを意味します。getIndexgetIndex(spans[d])d

しかし、あなたが本当にやろうとしていると思うのは、クリックされたインデックスを取得して、一致するインデックスで<span>表示できるようにすることです(そして残りを非表示にします)。<div>これを実現するには、コードを次のように変更できます。

function activateSup(s) {
    var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
    var spans = workTable.getElementsByTagName("span");
    var supDivs = workTable.getElementsByClassName("supDiv");
    var index;    

    for (var i = 0; i < spans.length; i++) {
        spans[i].style.backgroundColor = "";
        spans[i].style.border = "";

        if (s == spans[i])
            index = i;                    
    }

    s.style.backgroundColor = "#5eac58";
    s.style.border = "2px solid #336633";

    for (var d = 0; d < supDivs.length; d++) {
        if (index == d) {
            supDivs[d].style.display = "block";
        } else {
            supDivs[d].style.display = "none";
        }
    }
}

function の代わりに、これは最初のループ内getIndexに正しいものを保存するだけです。indexfor

s.parentNode.parentNode.parentNode.parentNode.parentNodeこのコードには、スタイルを手動で設定する代わりに CSS クラスを使用する必要がないように書き直すなど、さらに多くの改善点があります。しかし、それは読者に任せます。

于 2012-08-16T20:17:03.473 に答える