javascript - 获取当前元素的索引并改变他的样式

Question

我有一个函数，其目标是处理 Click 事件。

例如，我们有 4 个 Span 元素和 4 个 Div 元素。 跨度是我想“打开”那些 Divs 的选项卡按钮。

第一个 Span onClick 会(打开)更改“ block ”中第一个 Div 的样式显示，从“无”开始，依此类推下一个 Span。

这段代码工作得很好，但它只改变了元素的设计。

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 类而不是手动设置样式。但我会把它留给读者。