如何按名称显示图像(前缀)

如何在块中仅显示具有某些文本的图像,如“小”。 仅显示https://stackoverflow.com/questions/19300997/how-to-show-images-by-name-prefix/picture2_small.gif和https://stackoverflow.com/questions/19300997/how-to-show-images-by-name-prefix/picture4_small.gif。 而在另一个块显示所有’他们。

使用以下选择器之一

img[src$='small.gif'] – 仅显示src small.gif 结尾的图像

要么

img[src*='small'] – 仅显示其src 包含单词small的图像。

使用CSS

 .small_images img[src$='small.gif']{ display: block; } /* or */ .small_images img[src*='small']{ display: block; } 

使用jQuery

 $('.small_images img[src$="small.gif"]').show(); /* or */ $('.small_images img[src$="small.gif"]').css('display','block'); /* or */ $('.small_images img[src*="small"]').show(); /* or */ $('.small_images img[src*="small"]').css('display','block'); 

附加信息:(根据您对问题的更改)

添加.small_images将确保display仅设置为具有class='small_images'的元素下的img标记。

尝试使用选择器

 $('img[src*="_small"]').show(); 

为了展示那些小而隐藏其他的尝试,

  $(document).ready(function(){ $('img').each(function(){ var $img = $(this); if($img.attr("src").indexOf("small")!=-1){ $img.show(); }else{ $img.hide(); } });}); 

http://jsfiddle.net/3KcYk/

简单;

你可以使用;

 

对于div中的图像,使用样式;

 .small_images img{ display: none; } 

然后在你的javascript中,显示有“小”字样的图片,你提到过使用;

 $('img[src*="small"]').show(); 

这是一个演示