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

Question

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

逻辑如下：数组包含元素(var sum)，则生成尽可能多的div。这些元素表示图像名称。我意识到在第一个 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

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

您正在引用 this.id 但您从未声明过它！

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

Answer 2

<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>

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

Switch between multiple div elements on Gallery example

javascript

jquery

this

photo-gallery