0

特定の画像を表示/非表示にするために、個人サイトにいくつかのセクションを実装しようとしています。例: 印刷 / Web / UI / すべて。これらがクリックされると、そのリンク以外はすべて非表示になります。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>

私はオンラインとSOを見てきましたが、運がありませんでした。どこかで何かを見逃していたら申し訳ありませんが、事前に感謝します!

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

質問のタイトルから、分類を求めており、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 に答える
0

すべてを非表示にしてから、クリックされたものを表示するだけです。非常に簡単です...

$('a').click(function(){
    $('a').hide();
    $(this).show();
});
于 2012-08-01T18:04:33.820 に答える
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

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 に答える