获取当前元素的索引并更改其样式

Question

我有一个函数，其目的是处理onClick事件。

因此，我们有4个Span元素和4个Div元素。 Spans是Tabs按钮，我想“打开”那些Div。

第一个跨度onClick将（打开）更改“块”中第一个Div的style.display，从“none”更改，依此类推下一个Spans。

这段代码非常有效，但它只改变了元素的设计。

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";
    }
  }

Answer 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）与函数getIndex进行比较，而不是结果getIndex(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";
        }
    }
}

而不是函数getIndex，这只会在第一个index循环中保存正确的for。

可以对此代码进行更多改进，例如重写它，这样您就不需要那些丑陋的s.parentNode.parentNode.parentNode.parentNode.parentNode并使用CSS类而不是手动设置样式。但我会把它留给读者。