請幫我簡化：顯示/隱藏縮略圖和大圖像

因此，我非常喜歡JavaScript的初學者，並希望能夠簡化這段代碼。請幫我簡化：顯示/隱藏縮略圖和大圖像

我有一系列縮略圖以特定模式排列，當您單擊縮略圖時，我想讓所有縮略圖消失，並顯示相應的較大圖像。然後，當您點擊大圖像時，它會消失，所有縮略圖都會再次顯示。每個縮略圖都有自己的div ID，因爲它們都有其獨特的位置。我已經想出了一個辦法，但它是非常重複的。

HTML：

<style type="text/css"> 
    #largeimage_wrapper {visibility: hidden;} 
</style> 

</head> 

<body> 
<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big1();"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big2();"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big3();"/></div> 
    ...etc 
</div> 


<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs1();"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs2();"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs3();"/></div> 
    ...etc 
</div> 

</body>

的javascript：

get_big1() { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large1').style.visibility='visible'; 
} 
get_thumbs1() { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large1').style.visibility='hidden'; 
} 

get_big2() { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large2').style.visibility='visible'; 
} 
get_thumbs2() { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large2').style.visibility='hidden'; 
} 

get_big3() { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large3').style.visibility='visible'; 
} 
get_thumbs3() { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large3').style.visibility='hidden'; 
} 

</script>

必須有一個更好的辦法！我想這不是那麼難，我現在還無法掌握它。提前致謝。

來源

2012-02-08 Kudra Ilse

有很多的方法來解決這個問題。這使我想到的第一個也是最明顯的是簡單地傳遞一個數字，它決定了圖像的ID修改單個功能：

function get_thumbs(id) { 
    document.getElementById('thumbnailwrapper').style.visibility='visible'; 
    document.getElementById('large' + id).style.visibility='hidden'; 
} 

<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div> 
    ...etc 
</div>

...而對於get_big()同樣的事情。

另外，您可以只使用一個函數來處理（或大或縮略圖）兩個條件：

function get_img(id, type) { 
    if (type == 'big') { 
    document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
    document.getElementById('large' + id).style.visibility='visible'; 
    } 
    else if (type == 'thumb') { 
    document.getElementById('thumbnailwrapper').style.visibility='visible'; 
    document.getElementById('large' + id).style.visibility='hidden'; 
    } 
    else return false; 
}

而在HTML：

<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_img(1, 'big');"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_img(2, 'big');"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_img(3, 'big);"/></div> 
    ...etc 
</div> 
<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_img(1, 'thumb');"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_img(2, 'thumb');"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_img(3, 'thumb');"/></div> 
    ...etc 
</div>

來源

2012-02-08 03:37:04

這很好，謝謝！ – 2012-02-09 03:13:01

你可以通過使所有到兩個功能，並使用輸入驅動哪個項目會受到影響簡化：

HTML：

<style type="text/css"> 
    #largeimage_wrapper {visibility: hidden;} 
</style> 

</head> 

<body> 
<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div> 
    ...etc 
</div> 


<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div> 
    ...etc 
</div> 

</body>

的javascript：

get_big(id) { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large'+id).style.visibility='visible'; 
} 
get_thumbs(id) { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large'+id).style.visibility='hidden'; 
}

來源

2012-02-08 03:36:08

有很多方法可以做到這一點，這在jQuery中會非常快速和簡單，但我不會在這裏主張，因爲您明確想學習javascript，而jQuery可以讓您遠離許多問題。試着讓你的函數和函數調用通用的，就像這樣：

<style type="text/css"> 
    #largeimage_wrapper {visibility: hidden;} 
</style> 

</head> 

<body> 
<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div> 
    ...etc 
</div> 


<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div> 
    ...etc 
</div> 

</body>

的JavaScript

function get_thumbs(id) { 
    document.getElementById('thumbnailwrapper').style.visibility='visible'; 
    document.getElementById('large' + id).style.visibility='hidden'; 
} 
function get_big(id) { 
    document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
    document.getElementById('large' + id).style.visibility='visible'; 
}

來源

2012-02-08 03:39:35

像jQuery庫可以讓這個更容易，但在這裏是如何可以使用JavaScript改進你的代碼。

首先，修改你的html以包含類。然後我們將使用這些來收集選定的項目。同時刪除內嵌的onclick處理程序。儘量不要混用js和html。

<div id="thumbnail_wrapper"> 
    <div class="thumbnail" id="thumbnail1"><img src="thumbnail1.jpg" /></div> 
    <div class="thumbnail" id="thumbnail2"><img src="thumbnail2.jpg" /></div> 
    <div class="thumbnail" id="thumbnail3"><img src="thumbnail3.jpg" /></div> 
</div> 


<div id="largeimage_wrapper"> 
    <div class="large" id="large1"><img src="thumbnail1.jpg" /></div> 
    <div class="large" id="large2"><img src="thumbnail2.jpg" /></div> 
    <div class="large" id="large3"><img src="thumbnail3.jpg" /></div> 
</div>

其次是使用CSS來更改元素，而不是直接修改樣式屬性的可見性是有用的。這使得風格變化更容易。

div#thumbnail_wrapper .hidden { visibility: hidden; } 
div.large .hidden { visibility: hidden; }

接下來，我們可以使用getElementsByClassName方法附加onclick處理

var thumbs = document.getElementsByClassName('thumbnail'); 
var large = document.getElementsByClassName('large'); 

for (var i = 0; i < thumbs.length; i++) { 
    thumbs[i].onclick = function() { 
     //hide all thumbs 
     document.getElementById('thumbnail_wrapper').classList.add('hidden'); 
     //show large image (i got lazy and sliced) 
     document.getElementById('large' + this.id.slice(-1)).classList.remove('hidden'); 
    }; 
} 

for (var i = 0; i < large.length; i++) { 
    large[i].onclick = function() { 
     //hide large image 
     this.classList.add('hidden'); 
     //show thumbs 
     document.getElementById('thumbnail_wrapper').classList.remove('hidden'); 
    }; 
}

這將創建造型有細微的區別與CSS，DOM結構所包含元素和JavaScript代碼進行更改。

來源

2012-02-08 03:50:32 mrtsherman

請幫我簡化：顯示/隱藏縮略圖和大圖像

回答

相關問題