使用jQuery对图像进行分类_Jquery_Html_Css

使用jQuery对图像进行分类

jquery html css

使用jQuery对图像进行分类,jquery,html,css,Jquery,Html,Css,我试图在我的个人网站上实现几个部分来显示/隐藏某些图像。例如：打印/Web/UI/ALL。一旦单击了这些链接，它将隐藏除该链接之外的所有内容。有人知道使用jQuery实现这一点的简单方法吗？下面是我现在设置的代码： <div class="boxgrid slideright"> <img class="cover" src="images/xxx.jpg"/> <h3>Some title</h3> <p>some text<b

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


一些头衔
一些文本

我在网上查过，所以运气不好。对不起，如果我错过了什么地方，请提前感谢

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

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

给他们所有相同的类，但唯一的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>


函数ShowAll（）{
$（“.commonClassName”）。每个（函数（索引，项）{
item.show（）；
});
}

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

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

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

$('#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>

参考资料：

使用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>

根据问题的标题，您正在寻求分类，CSS选择器类的名称来自分类和分类，因此，您应该在相同的类名下对图像的每个类别进行分类。i、 e为每个要分类的图像指定属性类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>


$（文档）.ready（函数（）{
$（'.print'）。单击（函数（）{
$（'.print'）.css（'display'，'none'）；
$（this.css（'display'，'inline'）；
}) ;
});

什么？您想单击链接以过滤正在显示的图像（单击“打印”将显示“打印”图像，但隐藏其他图像），还是想单击链接以隐藏除您链接的图像之外的所有图像？是的，我想添加到相应图像的链接。所以，如果说，点击Web，它将只显示与Web相关的图像，并隐藏所有其他图像。但也希望添加一个所有按钮，将重置一切。我决不是jQuery大师，但我认为这是可以实现的。谢谢在这种情况下，我认为我的答案可能合适？您不需要jQuery来访问

id

，只需使用

item.id！=这个.id

我如何实现“全部显示”链接？我希望所有内容首先都是可见的。然后可以选择过滤掉某些群体，但我知道你要去哪里；我很高兴能帮上忙！（而且，真的，谢谢你的接受！）我唯一需要弄清楚的是我现在设置它的方式，我正在使用“FancyBox”jQuery库。因此，当你将图像悬停时，它会滑出，显示其下方的标题。因此，用户已经使用了一个类。类不是相互排斥的，所以这不一定是个问题。然而，如果这两种方法存在困难，那么第二个问题是如何结合这两种方法，这可能是值得问的？如果你这样做，那么请考虑发布一个演示，重现你的问题，或类似的。这样我们就可以看到您（代表）的代码在运行，并使用它使其工作。

$('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();            
    }
});

<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>