获取当前元素的索引并更改他的样式答案

【问题标题】：Getting the index of the current element and change his styles获取当前元素的索引并更改他的样式
【发布时间】：2012-08-13 05:58:46
【问题描述】：

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

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

第一个 Span onClick 将（打开）更改“block”中第一个 Div 的 style.display，从“none”，等等。

这段代码效果很好，但它只改变了元素的设计。

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

【问题讨论】：

对了，能详细说明一下HTML结构吗？我想知道您为什么需要查找s.parentNode.parentNode.parentNode.parentNode.parentNode。

标签： javascript

【解决方案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 进行比较，而不是函数调用@987654326 的结果 @（这是一个整数，如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 类而不是手动设置样式。但我会把它留给读者。

【讨论】：

谢谢！这很好用！并感谢您的建议，我会改进我的代码。