简化这个JavaScript显示一个，隐藏休息 [英] Simplify this javascript for Show one, Hide Rest

问题描述

我在画廊中使用脚本，点击导航中的某个元素只显示一个div，但隐藏了其他元素。

目前我的脚本很具体，因为我需要为每个可能的实例添加一个新的函数。见下文...你可以想象，这种情况会随着控制的增加而变得越来越轻松，越多的图像被添加。

有人可以帮助我使这个代码更加通用和优雅吗？我对Javascript / JQuery并不是非常有经验，但是这有点令人尴尬lol

因此，如果代码不清楚：＃li1，＃li2， ＃li3等是始终可见的导航缩略图。 ＃img1，＃img2，＃img3等是变量显示的div。

其他问题：

• 对于每个显示的＃img1，我想在单独的div中显示一个标题，比如＃title1，＃title2等。我该怎么做？因此，例如，点击＃li1将显示＃img1和＃title1，但隐藏所有其他#img ..和#title ..




• 所有＃都包含图像。我注意到，当其中一个图像被破坏时，整个脚本停止正常工作（所有#img .. divs一次显示）。为什么会这样？




• 这个脚本实际上并没有隐藏所有的图片，直到所有的图片都被加载完毕，在本地运行HTML时你并没有注意到，但你在等待图像下载时执行操作。我怀疑是因为$（＃li1）。load（function（）指的是文档中更深的div，我该如何反击？

我希望我不要求太多，我已经尝试了解这一点，但我无法弄清楚。

 
    解决方案
我可能会尝试这样的：
 
 
 
缩略图： 
 
 
 < li class =thumbnaildata-imageId =0> 
 ...缩略图... 
< / li> 
< li class =thumbnaildata-imageId =1> 
 ...缩略图... 
< / li> 
< li class =thumbnaildata-imageId =2> 
 ...缩略图... 
< / li> 
  
像： 
 
 
 < div class =imagedata-imageId =0> 
 ... image ... 
< / div> 
< div class =imagedata-imageId =1style =display：none;> 
 ... image ... 
< / div> 
< div class =imagedata-imageId =2style =display：none;> 
 ... image ... 
< / div> 
 <！ - 这些元素中的style属性默认隐藏元素
，同时仍然允许jQuery使用show（）显示它们。 - > 
  
然后JS：
 
 
 <$ p $ （）; 
 //隐藏所有图像
 $（。image）。hide（）; 
 
 //显示合适的值
 var imageId = $（this）.data（imageId）; //获取data-imageId属性的值
 $（ .image [data-imageId =+ imageId +]）。show（）; 
}）; 
  

I am using a script for a gallery in which clicking on an element in the navigation shows only one div, but hides the others.

Currently my script is very specific, as I need to add a new function for every possible instance. See below... You can imagine this grows out of control easily the more images are added.

Can someone help me make this code more generic and elegant? I'm not very experienced with Javascript/JQuery but this is getting a bit embarrassing lol

So in case it's not clear from the code: the #li1, #li2, #li3 etc are the navigational thumbnails which are always visible. The #img1, #img2, #img3 etc. are the variable displayed divs. When one is visible, the rest should be hidden.

Additional questions:

• for every #img1 displayed, I'd like to also show a title in a separate div, let's say #title1, #title2, etc. How do I do this? So eg clicking #li1 would show #img1 and #title1 but hide all other #img.. and #title..

• all #'s contain images. I've noticed that when one of the images is broken, the whole script stops working properly (all #img.. divs show at once). Why is that?

• this script doesn't actually hide all the images until everything is loaded, which you don't notice when running the HTML locally, but you do when you're waiting for the images to download. I'm suspecting because the $("#li1").load(function() refers to a div that is further down in the document. How can I counter this?

I hope I'm not asking too much, I've tried to understand this myself but I can't figure it out.

$("#li1").load(function() {
   $("#img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0, #intro").hide();
   $("#img1").show();
});
$("#li1").on('click', function() {
   $("#img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
   $("#img1").show();
});
$("#li2").on('click', function() {
   $("#img1, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
   $("#img2").show();
});
$("#li3").on('click', function() {
   $("#img2, #img1, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
   $("#img3").show();
});

etc.

解决方案

I would probably try something like this:

Thumbnails like:

<li class="thumbnail" data-imageId="0">
  ...thumbnail...
</li>
<li class="thumbnail" data-imageId="1">
  ...thumbnail...
</li>
<li class="thumbnail" data-imageId="2">
  ...thumbnail...
</li>

Images like:

<div class="image" data-imageId="0">
  ...image...
</div>
<div class="image" data-imageId="1" style="display: none;">
  ...image...
</div>
<div class="image" data-imageId="2" style="display: none;">
  ...image...
</div>
<!-- The style attribute in these element hides the element by default,
     while still allowing jQuery to show them using show(). -->

And then the JS:

$(".thumbnail").click(function() {
   // Hides all images.
   $(".image").hide();

   // Shows appropriate one.
   var imageId = $(this).data("imageId"); // Fetches the value of the data-imageId attribute.
   $(".image[data-imageId="+imageId+"]").show();
});

这篇关于简化这个JavaScript显示一个，隐藏休息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！