2

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

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

第一个 Span onClick 将（打开）更改“block”中第一个 Div 的 style.display，从“none”更改为下一个 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";
    }
  }
4

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) 与 function进行比较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";
        }
    }
}

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

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

于 2012-08-16T20:17:03.473 回答