1

How to show in block only images which name have some text like "small". To show only picture2_small.gif and picture4_small.gif. And in another block show all of 'em.

<div class="small_images">
  <img src="picture1.gif" />
  <img src="picture2_small.gif" />
  <img src="picture3.gif" />
  <img src="picture4_small.gif" />
</div>

<div class="all_images">
  <img src="picture1.gif" />
  <img src="picture2_small.gif" />
  <img src="picture3.gif" />
  <img src="picture4_small.gif" />
</div>
4

4 回答 4

2

尝试使用选择器

$('img[src*="_small"]').show();
于 2013-10-10T16:14:24.177 回答
1

使用以下选择器之一

img[src$='small.gif']- 仅显示src 以 small.gif

或者

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

使用 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设置为仅存img在于带有 的元素下的那些标签class='small_images'。

于 2013-10-10T16:19:00.433 回答
1

要显示小的并隐藏其他尝试，

   $(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/

于 2013-10-10T16:19:04.970 回答
0

简单的;

您可以使用；

<div class="small_images">
<img src="picture1.gif" />
<img src="picture2_small.gif" />
<img src="picture3.gif" />
<img src="picture4_small.gif" />
</div>

对于 div 内的图像，使用类似的样式；

.small_images img{
    display: none;
}

然后在您的 javascript 中，显示具有“小”之类的文本的图像，您提到过使用；

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

这是一个演示

于 2013-10-10T16:23:27.270 回答