我的 Javascript 内容库 - 此处某处出错

My Javascript Content Gallery - Error Somewhere here

本文关键字：出错 Javascript 我的      更新时间：2023-09-26

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

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

使用我的脚本，我将变量 ImageCnt 设置为零，我检查 ID 数组的长度，这些 ID 数组都将在函数 nextImage 中使用，该函数采用一个参数"direction"，我定义我的函数来处理转换：nextImage（direction）。

<script>
    var backgroundId = new Array();
    var backgroundId = [
        "img_1",
        "img_2",
        "img_3",
        "img_4",
        "img_5",
        "img_6",
        "img_7",
    ];
    var ImageCnt = 0;

左过渡箭头将使用参数"left"调用函数 nextImage，让函数知道递增 ImageCnt 的方向，该 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上存在这个问题 - （我知道发布链接是不合适的，我很快就会删除它）

你有点混淆了你的零索引和单索引表示法。 ImageCnt从 0 到 6，您的图像列表从 1-7。由于（我假设）您没有img_0，因此在 DOM 中搜索它时它会爆炸。

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

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

相关文章：