javascript - 如何使用 dojo.style 处理多个表单页面？

Question

我正在使用 dojo 1.6 并尝试使用以下代码处理表单页面:

dojo.forEach(dojo.query(".form-page"), function(page, i){
    if(page.id == "form-part1"){
        dojo.style(page, "display", "block");
    }else{
        dojo.style(page, "display", "none");
    }
 });

 dojo.query(".nextPgButton").connect("onclick", function(){
      var pages = dojo.query(".form-page");
      dojo.forEach(pages, function (page, i){
          if(dojo.style(page, "display") != "none"){
               dojo.style(page, "display", "none");
               dojo.style(page[i+1], "display", "block");
           }
      });
 });

第一条语句有效，因为只有第一页按预期显示。但是第二个没有正确检索页面的当前样式。因此，当我单击下一页按钮时，所有页面都被隐藏了。

dojo.style(page,"display") // always return "block"

有人能告诉我为什么 dojo.style 不检索我页面的实际样式吗？

非常感谢

Answer 1

你在那里做了一些非常奇怪的事情。

你的最后一行 page[i+1] 实际上永远不会工作，因为 page 不是数组。我想您可能是指 pages[i+1]。

如果您真的是我刚才所说的意思，那么它会返回 block 是常识。只需考虑您有两个 .form-page 元素的情况。单击按钮时会发生以下情况:

第一次迭代:您的第一个 ID 为 #form-part1 的元素具有 display: block 因为您最初是这样设置的。这显然意味着正在执行 forEach() 中的 if() 语句，因为它不等于 "none"。

这意味着它将 #form-part1 的样式设置为 display: none，但也意味着它将下一个元素 CSS 设置为 display: block 。

第二次迭代:您的第二个 .form-page 现在有 display: block(阅读上一次迭代的最后一句话)。这意味着 if() 也被 执行，将样式设置回 display: none。

它还会尝试找到下一页，但是已经没有其他页面了，所以它也会抛出错误(代码中的另一个错误)。

---

所以你显然必须重新检查你的代码，因为你做错了一些事情。您还必须改写您的问题，因为目前尚不清楚您实际想要实现的目标。但对我来说，如果你有 2 个页面，if() 语句总是被执行是有道理的。