Question

所以我是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>

一定有更好的方法！我想这并不困难，我只是无法掌握它。提前谢谢。

Answer 1

您可以通过将其全部分为两个函数并使用输入来驱动哪个项受影响来简化：

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';
}

Answer 2

有很多方法可以解决这个问题。我想到的第一个也是最明显的就是将一个数字传递给一个确定要修改的图像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>

Answer 3

像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代码之间创造了一个很好的区别。

Answer 4

有很多方法可以做到这一点，在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';
}

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

4 个答案: