隐藏/显示图像 jQuery答案

【问题标题】：Hiding/Showing images jQuery隐藏/显示图像 jQuery
【发布时间】：2015-09-02 17:06:00
【问题描述】：

好的。我想要做的是在顶部创建一些按钮，它们将隐藏/显示元素。
如果用户按下“350x150”，它将隐藏除“350x150”图像之外的所有图像。

1)。用户按下“350x150”
2)。所有图像都隐藏，除了两个“350x150”

我尝试使用一些 jQuery 来隐藏图像，但它不起作用。
我该怎么做？

图像是这样完成的：

                <div class="Collage">
                    <img class="boom" src="http://placehold.it/1000x150">
                    <img class="ei" src="http://placehold.it/150x150">
                    <img class="boom" src="http://placehold.it/200x150">
                    <img class="ei" src="http://placehold.it/200x350">
                    <img class="350x150" src="http://placehold.it/350x150">
                    <img class="350x150" src="http://placehold.it/350x150">
                    <img class="boom" src="http://placehold.it/500x150">
                    <img class="ei" src="http://placehold.it/50x200">
                    <img class="boom" src="http://placehold.it/350x200">
                    <img class="ei" src="http://placehold.it/600x200">
                </div>

【问题讨论】：

您需要有一个属性，它将图像与您单击的按钮相关联..
向我们展示你的 jQuery。
你应该真正展示你已经尝试解决你自己的问题的东西

标签： javascript jquery html show-hide

【解决方案1】：

您可以添加到您的过滤器 btns 类，比如说“filter-btn”，然后它们的 id 可能与您要显示的类相同，例如 id="350x150" 或 id="boom" 或 id= “ei”...我想你明白了:)

$(".filter-btn").click(function(){
var filterVal = "." + $(this).attr("id");
  $(".Collage img").show();
  $(".Collage img").not(filterVal).hide();
});

或者你可以先隐藏所有，然后显示你需要的：

$(".filter-btn").click(function(){
var filterVal = "." + $(this).attr("id");
  $(".Collage img").hide();
  $(".Collage img").filter(filterVal).show();
});

EDIT 或更好地缓存您的元素：

var $collageImages = $(".Collage").find("img"); // cache your elements!
$("#filter350x150").click(function(){
  $collageImages.hide();  // Hide all
  $(".350x150").show();   // Show desired ones
});
// other buttons here...

或者使用更通用的代码：

var $collageImages = $(".Collage").find("img"); // cache your elements!
$("[id^=filter]").click(function(){  // any button which ID starts with "filter"
  var class = this.id.split("filter")[1]; // get the filterXYZ suffix
  $collageImages.hide();                  // Hide all
  $collageImages.is("."+ class ).show()   // Show desired ones
});

【讨论】：

如果有其他过滤按钮，最好也包括$("img.350x150").show()，以确保.350x150的图像可见。
只隐藏那些与过滤器不匹配的内容怎么样。有道理吗？
@ZoranP。 oyu 测试过你的第二个例子吗？我不认为它会起作用。你在那里过滤什么？
<div class="Collage"> <script> var $collageImages = $(".Collage").find("img"); </script> 给我这个，我想我做错了什么。 i.imgur.com/ZNiDE6g.png
我正在使用 CollagePlus 生成拼贴，也许它在生成拼贴后不允许任何更改？因此纯文本而不是脚本工作？

【解决方案2】：

尝试使用不以数字开头的类名。我遇到了很多麻烦。
例如<img class="res350x150" src="" />

【讨论】：