0

问题：为什么我的脚本在第 7 个内容（ID：img_7）上将内容留空？

ID img_1 - ID img_6 的所有内容都发生了变化，但是当我达到第七个间隔时，它是空白的。

在我的脚本中，我将一个变量 ImageCnt 设置为零，我检查了一个 ID 数组的长度，这些 ID 都将在函数 nextImage 中使用，该函数接受一个参数“direction”，我定义了我的函数以照顾转换：nextImage（方向）。

<script>

    var backgroundId = new Array();
    var backgroundId = [
        "img_1",
        "img_2",
        "img_3",
        "img_4",
        "img_5",
        "img_6",
        "img_7",
    ];

    var ImageCnt = 0;

左过渡箭头将调用函数 nextImage 并带有参数 'left' 让函数知道递增 ImageCnt 的方向，这控制了函数 nextImage 可点击和可见的 ID。例如 nextImage('right') 将告诉函数 nextImage 向下递增 1。这使得如果 ID img_4 正在通过脚本呈现并且函数 nextImage 使用参数 'right' 调用，则

    function nextImage(direction) 
    {
            var i=1;
            while(i<8)
            {
            document.getElementById("img_" + i).style.opacity = "0"; //"un-render" the rest of the elements
            document.getElementById("img_" + i).style.pointerEvents = "none";//"un-render" the rest of the elements
            i++;
            }

在这里（上图）我使用了一个while循环来强制所有的ID“消失”——新选择的ID会同时重新出现，而CSS会在这里产生一个非常平滑、漂亮、完美的过渡。

        ImageCnt = (ImageCnt + (direction == "left" ? backgroundId.length-1 : 1)) % backgroundId.length;

在这里（上图）我们只是使用 ImageCnt 遍历我们的图片以跟踪所选图像及其右/左转换。

        document.getElementById("img_" + ImageCnt).style.opacity = "1";

        document.getElementById("img_" + ImageCnt).style.pointerEvents = "auto";

最后，在上面，我们将存储在 ImageCnt 中的数字附加到“img_”以选择要重新设置样式的特定 ID。不透明度和指针事件是这里的关键参与者。

    }

你有它。我做错了，如果你能找到问题，请帮助我！我正在寻找错误：/

JS 小提琴：http: //jsfiddle.net/EagyP/

我的 JS Fiddle 在转换时不能正常工作，但是在我正在测试的 www.testing.agcomputers.net 上，它正在工作，尽管在 img_7 上存在这个问题 - （我知道发布链接不合适，我会尽快删除）

4

1 回答 1

0

您将零索引和一索引符号混为一谈。ImageCnt从 0-6 开始，您的图像列表从 1-7 开始。因为（我假设）你没有 img_0，所以在搜索 DOM 时它会爆炸。

我的测试似乎表明，如果您将 img_7 更改为 img_0 您将被设置，尽管该解决方案既快速又肮脏。

一个更可靠的解决方案是使用存储在其中的值backgroundId[ImageCnt]进行搜索，如下所示： document.getElementById(backgroundId[ImageCnt]) 这使得数字（来自ImageCnt）与元素名称分开，允许您将元素命名为任何您想要的名称，只要它在您的backgroundId数组中。（可以通过其他方式进行改进以使其变得不必要。）

于 2013-09-20T19:30:41.083 回答