Question

我试图在我的个人网站上实施一些部分来显示/隐藏某些图像。例如：打印/ Web / UI / ALL。一旦点击这些，它将隐藏所有链接。有没有人知道使用jQuery做一些简单的方法？这是我的代码现在设置：

<div class="boxgrid slideright">
<img class="cover" src="images/xxx.jpg"/>
<h3>Some title</h3>
<p>some text<br/><a href="images/xxx.jpg" rel="group" 
     class="fancybox">View &raquo;</a>  </p>    
</div>

我已经在网上搜索过，并且没有运气。对不起，如果我错过了某个地方，并提前感谢！

Answer 1

这是一个简单的实现，可以很好地为您提供开发的想法：

$('#controls li a').click(
    function(e){
        e.preventDefault();
        var that = this,
            $that = $(that),
            id = that.id,
            gallery = $('#gallery');
        if (id == 'all') {
            gallery.find('img:hidden').fadeIn(1000);
        }
        else {
            gallery.find('img.' + id + ':hidden').fadeIn(1000);
            gallery.find('img').not('.' + id).fadeOut(1000);
        }
    });

这基于以下HTML结构：

<ol id="controls">
    <li><a href="#" id="web">Web</a></li>
    <li><a href="#" id="canvas">Canvas</a></li>
    <li><a href="#" id="print">Print</a></li>
    <li><a href="#" id="all">All</a></li>
</ol>
<div id="gallery">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" class="web" />
    <img src="http://davidrhysthomas.co.uk/img/mandark.png" class="canvas" />
    <img src="http://davidrhysthomas.co.uk/img/drPooh2.png" class="print" />
</div>

JS Fiddle demo

参考文献：

Answer 2

我不确定这是不是你真正想要做的，但根据你的问题，这是一个答案：

$('a').click(function(){
    var $self = $(this);
    $('a').each(function(){
        if($(this) !== $self) $(this).hide();
    });
    $('img').hide();
});

Answer 3

给他们所有相同的类，但唯一的ID。然后，将onclick附加到该类的所有元素，并使用$.each()隐藏所有通过的元素：

if(item.attr('id') != this.attr('id'))

根据你的评论，你可以像这样“全部显示”：

<a href="#" onclick = "ShowAll()">Show all</a>
<script type="text/javascript">
    function ShowAll(){
        $(".commonClassName").each(function(index, item){
            item.show(); 
        });
    }
</script>

Answer 4

隐藏所有内容然后显示点击的内容，非常简单...

$('a').click(function(){
    $('a').hide();
    $(this).show();
});

Answer 5

使用img标签的'title'属性来存储该图像的类别。

<div class="boxgrid slideright">
    <img src="images/xyz.jpg" title="print" alt="" />
    <img src="images/abc.jpg" title="web" alt="" />
    <img src="images/def.jpg" title="print" alt="" />
    <img src="images/jkl.jpg" title="ui" alt="" />
    <img src="images/123.jpg" title="web" alt="" />
</div>

然后，给你的'a'元素一个相应的类。

<a href="#" class="web">Web</a>
<a href="#" class="print">Print</a>
<a href="#" class="ui">UI</a>
<a href="#" class="all">All</a>

然后在js：

$('div.boxgrid.slideright a').click(function(ev) {
    if($(this).hasClass('all')) {
        $('div.boxgrid.slideright img').show();        
    }
    else {
        $('div.boxgrid.slideright img[title="' + $(this).attr("class") + '"]').show();
        $('div.boxgrid.slideright img:not([title="' + $(this).attr("class") + '"])').hide();            
    }
});

Answer 6

从问题的标题中，您正在寻找分类，并且CSS选择器类的名称来自分类和分类，因此，您应该在相同的类名下对图像的每个类别进行分类。给你要分类的每个图像给出属性类class ='print'class ='web'等等。

在jquery中，您应该执行以下操作：

<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
$('.print').click(function(){

$('.print').css('display','none');

$(this).css('display','inline');

}) ;
}); 
</script>
</head>
<body>
<input type='button' value="b1" class="print" />
<input type='button' value="b2" class="print" />
<input type='button' value="b3" class="print" />
<input type='button' value="b4" class="print" />

<input type='button' value="bA" class="web" /><input type='button' value="bB" class="web" /><input type='button' value="bC" class="web" />
</body>
</html>

使用jQuery对图像进行分类

6 个答案: