0

この質問をどのように表現したらよいかわかりません。そのため、Google が私をぶら下げたままにしておいたのです。

基本的に、(たとえば) 30 枚の写真を含むフォト ギャラリーを作成したいと考えています。これらの 30 枚の写真には、3 つの異なるカテゴリに分類できます。

ユーザーがチェックボックスをクリックして、さまざまなカテゴリ (および後続の画像) を表示または非表示にしたり、すべてを表示したりできるようにしたいと考えています。

たとえば、フォト ギャラリーの左側に 4 つのチェック ボックスがあります。一番上のボックスはすべて、次にカテゴリ 1、カテゴリ 2、カテゴリ 3 になります。各ボックスをクリックすると、それらの「タイプ」の画像のみが表示されます。

コード (または、CSS、Javascript、jQuery など、探しているコードの種類) に関するヒントをいただければ幸いです。ありがとう！

4

1 に答える 1

1

CSS ->

.chkbox-container{
  float:left;
  width:95px;
  border:1px solid #ccc;    
}
.img-container{
  float:left;
  width:300px;
  border:1px solid #ccc;    
}
img{
  display:inline-block;
  width:90px;
  height:75px;
  padding:2px;
  border:1px solid black;
  display:none;    
}

JQuery->

$('.chkbox-container :radio').on('change', function(){
  var me = $(this);
  $.each($('.img-container img'), function(i,v){
    var theCats = $(v).attr('rel');
    theCats = theCats.split(' ');
    if($.inArray(me.val(), theCats)){
      $(v).show();
    }else{
      $(v).hide();
    }

  });        
});

HTML ->

<div class="chkbox-container">
  <input type="radio" name="catfilter[]" value="all" checked="checked"/> All<br/>
  <input type="radio" name="catfilter[]" value="category1" /> Category 1<br/>
  <input type="radio" name="catfilter[]" value="category2" /> Category 2<br/>
  <input type="radio" name="catfilter[]"value="category3" /> Category 3<br/>
</div>
<div class="img-container">
  <img src="path.to/the/image/ext" rel="category1" />
  <img src="path.to/the/image/ext" rel="category2" />
  <img src="path.to/the/image/ext" rel="category3" />
</div>

便利だと思う人なら誰でもjsFiddleを使用できます。

于 2012-07-26T14:32:46.777 に答える