Hiding/Showing 图片 jQuery

Question

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

1). User presses "350x150"
2). All images hide except for the two "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>

Answer 1

你可以添加到你的过滤器 btns class 让我们说 "filter-btn" 然后他们的 id 可以与你想要显示的 class 相同，例如 id="350x150 " or id="boom" or 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();
});

编辑或更好地缓存您的元素：

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

Answer 2

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

Hiding/Showing 图片 jQuery

Hiding/Showing images jQuery

html

javascript

jquery

show-hide