请帮我简化：显示/隐藏缩略图和大图像

因此，我非常喜欢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

请帮我简化：显示/隐藏缩略图和大图像

回答

相关问题