单击特定 div 时如何更改三个不同 div 的缩略图

Question

我对 html、css 和 javascript 比较陌生。到目前为止，我有一个带有缩略图库的登录页面。由于不同的原因，每个缩略图位于不同的 div。当我在div 内部单击时，我使用javascript 来更改缩略图，并且缩略图会更改。问题是：当我更改为另一个 div 时，我需要单击两次才能使脚本开始工作。我的 html 和 js 代码是：

<div id="thumb1" class="fluid"><img src="img/image2.jpg" img id="img1" alt=""/></div>

<script type="text/javascript">
var images = ["img/image1.jpg",
              "img/image2.jpg",
              "img/image3.jpg" 
],

i = 1;
for (var j=images.length; j--;) {
var img = new Image();
img.src = images[j];
}

document.getElementById('img1').addEventListener('click', function() {
this.src = images[i >= images.length - 1 ? i = 0 : ++i];
}, false);
</script>

<div id="thumb2" class="fluid"><img src="img/imageC.jpg" img id="img2" alt=""/></div>

<script type="text/javascript">
var images2 = [
"img/imageA.jpg",
"img/imageB.jpg",
"img/imageC.jpg",
"img/imageD.jpg"
],
i = 1;
for (var j=images2.length; j--;) {
var img2 = new Image();
img2.src = images2[j];
}

document.getElementById('img2').addEventListener('click', function() {
this.src = images2[i >= images2.length - 1 ? i = 0 : ++i];
}, false);
</script>

有没有一种方法可以简单易行地将这两个（或更多）脚本转换为一个？现在，脚本是相同的，但我不认为每次都为每个 div 复制脚本是最合理的继续进行的方式。此外，由于我需要两个以上 div，例如九个或十个...我不想要一堆无用的代码...任何帮助将不胜感激。非常感谢。

Answer 1

你的问题是，当你在内联脚本中使用 var 时，它总是在主范围内创建它（即 window）。

例如：

<script type="text/javascript">
  var i = 1;

  //...your code
</script>
<script type="text/javascript">
  var i = 2;

  //...your code
</script>

两个脚本都将值赋给 window.i，这在两个脚本中都等于 2。

为了使其独立，将每个脚本包装成一个函数，如下所示：

<script type="text/javascript">
    (function() {
        var i = 1;

        //...your code
    })();      
</script>
<script type="text/javascript">
    (function() {
        var i = 2;

        //...your code
    })();      
</script>

或者简单而不是 i 使用更具体的东西，例如imageIndex1 和 imageIndex2.

有经验的开发者可能会这样写，虽然有点短，但对新手来说可读性较差：

<script type="text/javascript">
    (function(i) {
        //...your code
    })(1);      
</script>
<script type="text/javascript">
    (function(i) {
        //...your code
    })(2);      
</script>

Answer 2

您可以使用此解决方案，将所有图像放入每个 div 中，但每次都会隐藏所有图像，只有一个图像除外，并且 onClick 侦听器会更改显示属性。

<html>
<body>

<script type="text/javascript">
    function getOnlyImagesFromArray(nodeList) {
        var onlyImagesArray = [];

        var nodeListAsArray = Array.prototype.slice.call(nodeList, 0);
        nodeListAsArray.forEach( function(element) { 
            if(element.localName == 'img') {
                onlyImagesArray.push(element);
            }
        });

        return onlyImagesArray;  
    }

    function handleClick() {
        // using JQuery here would be much cleaner, but out of shear lazyness, I've created the helper function "getOnlyImagesFromArray"
        var onlyImages = getOnlyImagesFromArray(this.childNodes);

        var visibleIndex = -1;
        for(var i = 0; i < onlyImages.length; i++) {
            if(onlyImages[i].style.display == 'inline') {
                visibleIndex = i;
                break;
            }  
        };

        onlyImages[visibleIndex].style.display = "none";
        onlyImages[visibleIndex >= onlyImages.length - 1 ? visibleIndex = 0 : ++visibleIndex].style.display = "inline";
    }
</script>


<div id="thumb1" class="fluid">
    <img src="img/image1.jpg" img id="img1" alt="" style="display:none"/>
    <img src="img/image2.jpg" img id="img1" alt="" style="display:inline"/>
    <img src="img/image3.jpg" img id="img1" alt="" style="display:none"/>
</div>

<script type="text/javascript">
    document.getElementById('thumb1').addEventListener('click', handleClick, false);
</script>

<div id="thumb2" class="fluid">
    <img src="img/imageA.jpg" img id="img2" alt="" style="display:none"/>
    <img src="img/imageB.jpg" img id="img2" alt="" style="display:none"/>
    <img src="img/imageC.jpg" img id="img2" alt="" style="display:inline"/>
    <img src="img/imageD.jpg" img id="img2" alt="" style="display:none"/>
</div>

<script type="text/javascript">
    document.getElementById('thumb2').addEventListener('click', handleClick, false);
</script>

</body>
</html>

单击特定 div 时如何更改三个不同 div 的缩略图

How to change the thumbnail of three different div when click on a specific div

html

javascript

onclick

gallery