0

我正在尝试在我的个人网站上实现几个部分来显示/隐藏某些图像。例如：打印/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>

我在网上看过，所以没有运气。抱歉，如果我在某处遗漏了什么，请提前致谢！

4

6 回答 6

2

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

$('#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 小提琴演示。

参考：

于 2012-08-01T18:16:56.880 回答
0

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

$('a').click(function(){
    var $self = $(this);
    $('a').each(function(){
        if($(this) !== $self) $(this).hide();
    });
    $('img').hide();
});
于 2012-08-01T18:01:15.043 回答
0

给他们所有相同的类，但唯一的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>
于 2012-08-01T18:03:08.087 回答
0

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

$('a').click(function(){
    $('a').hide();
    $(this).show();
});
于 2012-08-01T18:04:33.820 回答
0

使用 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();            
    }
});
于 2012-08-01T18:22:26.440 回答
0

从您的问题的标题来看，您正在寻求分类，并且 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>
于 2012-08-01T18:31:03.943 回答