在 Gallery 示例中的多个 div 元素之间切换

Question

我正在尝试构建简单的 javascript/jquery 库。我想这是一个非常具体的问题。

逻辑如下：使 div 与数组包含的元素一样多（var sum）。这些元素呈现图像名称。我意识到在第一个 for 循环中（第一个 append 函数添加图像，第二个添加名称列表 - 在图像之间导航）。在第二个 for 循环中，我设置了初始值（给我看第一张图片），它可以工作。

我在尝试将功能分配给名称列表中的单击元素时遇到了障碍。第三个 for 循环显然有效（因为它是第二个的副本）。 有语法错误吗？

代码：

<div id="container"> //contains images
</div>

<div id="list"> //contains navigation numbers
</div>

<script>
    var array = ['0', '1', '2'];  //img names
    var sum = array.length;
    var currentId = 'a' + array[1];

    $(document).ready(function () {
        for (var i = 0; i < sum; i++) {
            $("#container").append("<img class='a' src='img/" + array[i] + ".jpg' id='a" + array[i] + "'>");
            $("#list").append("<a href='#a" + array[i] + "' onclick='checkButton()'>" + array[i] + "</a><br />");
        }
        for (var i = 0; i < sum; i++) {
            var inactiveId = 'a' + array[i];
            if (currentId !== inactiveId) {
                document.getElementById(inactiveId).style.display = "none";
            }
        }
        currentId1 = this.id;
        $(currentId1).click(function () {

            document.getElementById(currentId1).style.display = "block";

            for (var i = 0; i < sum; i++) {
                var inactiveId = 'a' + [i];
                if (inactiveId !== currentId1) {
                    document.getElementById(inactiveId).style.display = "none";
                }
            }

        })
    });

</script>

Answer 1

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div id="container">
	<img id="dimg" src=""/>
</div>
<hr>
<div id="list">

</div>
<script>
	var images = [
    	'http://www.qygjxz.com/data/out/208/5695232-smile-pics.png',
    	'https://i.pinimg.com/736x/a5/0b/9f/a50b9f1bb631d41623510a779741ca67.jpg',
    	'https://i.pinimg.com/736x/c0/1e/7e/c01e7e0b36c7edba6a90887dc63ac49d--smiley-happy-smile-face.jpg'
    ];

	var sizes = {
		width: 100,
		height: 100
	}

	$(document).ready(function () {

		// Define the default size for all images
		$("#dimg").width(sizes.width).height(sizes.height);

		// Show the image names
		for (var i = 0; i < images.length; i++) {
			let imgName = images[i].split("/");
			let anchor = $("<a href='#' lnk='" + images[i] + "'>" + imgName[imgName.length-1] + "</a><br/>");
			$("#list").append(anchor);

			// Click event
			anchor.on("click", function() {
				$("#dimg").attr("src", $(this).attr("lnk"));
			});
		}

		// Click to the first image name
		$("#list a:eq(1)").trigger("click");
	});

</script>

Answer 2

currentId1 = this.id; 行似乎是问题所在。

您引用了this.id，但您从未声明它！

编辑： 另请参阅 Kaddaths 评论，他提供了一些关于您的代码也不起作用的更多见解！