如何更改三個不同div的縮略圖，當點擊特定的div

-2

我是相對較新的html，css和javascript。到目前爲止，我有一個帶有縮略圖庫的着陸頁。由於不同的原因，每個縮略圖都位於不同的div中。當我點擊div內部時，我使用javascript來縮小縮略圖，縮略圖也會改變。問題是：當我切換到另一個div時，我需要點擊兩次才能使腳本開始工作。我的HTML和JS代碼：如何更改三個不同div的縮略圖，當點擊特定的div

<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，比如九個或十個......我不想要一堆無用的代碼......任何幫助將不勝感激。非常感謝你。

來源

2016-01-19 Arnau

當您需要多次運行代碼段時，爲什麼不把它放在一個多次調用的函數中呢？ – jkalden

您可以使用此解決方案，在那裏你把你所有的圖片每格內，但每次都會隱藏除一個圖像以外的所有圖像，並且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>

來源

2016-01-19 12:56:38 DougieHauser

謝謝，它像一個魅力工作！還有一個比我使用的所有無用的代碼行更優雅的解決方案。 – Arnau

您的問題是，當您在內聯腳本中使用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>

來源

2016-01-19 12:15:52

如何更改三個不同div的縮略圖，當點擊特定的div

回答

相關問題