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

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

javascript html

Javascript 如何在单击特定div时更改三个不同div的缩略图,javascript,html,onclick,gallery,Javascript,Html,Onclick,Gallery,我对html、css和javascript比较陌生。到目前为止，我有一个带有缩略图库的登录页。由于不同的原因，每个缩略图都位于不同的div中。当我在div中单击时，我使用javascript更改缩略图，缩略图也随之更改。问题是：当我切换到另一个div时，我需要单击两次以使脚本开始工作。我的html和js代码是： <div id="thumb1" class="fluid"><img src="img/image2.jpg" img id="img1" alt=""/>&

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


var images=[“img/image1.jpg”，
“img/image2.jpg”，
“img/image3.jpg”
],
i=1；
对于（var j=images.length；j--；）{
var img=新图像（）；
img.src=图像[j]；
}
document.getElementById（'img1'）。addEventListener（'click'，function（）{
this.src=images[i>=images.length-1？i=0:++i]；
}，假）；
var图像2=[
“img/imageA.jpg”，
“img/imageB.jpg”，
“img/imageC.jpg”，
“img/imageD.jpg”
],
i=1；
对于（var j=images2.length；j--；）{
var img2=新图像（）；
img2.src=images2[j]；
}
document.getElementById（'img2'）。addEventListener（'click'，function（）{
this.src=images2[i>=images2.length-1？i=0:++i]；
}，假）；

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

您的问题是，当您在内联脚本中使用

var

时，它总是在主范围（即

窗口

）中创建它

e、 g:

或者简单而不是

使用更具体的内容，例如

imageIndex1

和

imageIndex2

更有经验的开发人员可能会这样编写，虽然有点短，但对初学者来说可读性较差：

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


（职能（一）{
//…您的代码
})(1);      
（职能（一）{
//…您的代码
})(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>


函数getOnlyImagesFromArray（节点列表）{
var onlyImagesArray=[]；
var nodeListAsArray=Array.prototype.slice.call（nodeList，0）；
forEach（函数（元素）{
if（element.localName==“img”）{
仅一个magesarray.push（元素）；
}
});
仅返回图像阵列；
}
函数handleClick（）{
//在这里使用JQuery会更简洁，但出于懒散，我创建了助手函数“getOnlyImagesFromArray”
var onlyImages=getOnlyImagesFromArray（this.childNodes）；
var visibleIndex=-1；
对于（变量i=0；i=onlyImages.length-1？visibleIndex=0:++visibleIndex].style.display=“inline”；
}
document.getElementById（'thumb1'）。addEventListener（'click'，handleClick，false）；
document.getElementById（'thumb2'）。addEventListener（'click'，handleClick，false）；

当您需要多次运行代码段时，为什么不将其放在一个被多次调用的函数中呢？谢谢，它工作得很好！这是一个比我使用的所有无用代码行都要优雅得多的解决方案。

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

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