Question

好的。我想要做的是在顶部创建一些按钮，这将隐藏/显示元素。
如果用户按下＆＃34; 350x150＆＃34;除了＆＃34; 350x150＆＃34;它将隐藏所有图像。图像。

1）。用户按下＆＃34; 350x150＆＃34;
2）。所有图像都隐藏了除了两个＆＃34; 350x150＆＃34;

我尝试使用一些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类，让我们说＆＃34; filter-btn＆＃34;然后他们的id可能与你想要显示的类相同，例如id =＆＃34; 350x150＆＃34;或者id =＆＃34;繁荣＆＃34;或者id =＆＃34; ei＆＃34; ......我认为你明白了这一点：）

$(".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

尝试使用类名，该名称不以数字开头。如果遇到这种情况，我会遇到很多麻烦例如<img class="res350x150" src="" />

隐藏/显示图像jQuery

2 个答案: