Как отфильтровать изображения по категориям, используя форму ввода и JQuery?

Question

Например,

У меня есть страница с четырьмя изображениями

<img src="1" />

<img src="2" />

<img src="3" />

<img src="4" />

Filter:
<form>
<input type="checkbox" name="gallery" value="abstract" /> Abstract<br />
<input type="checkbox" name="gallery" value="landscape" /> Landscape
</form> 

Как добавить разметку для каждого изображения в определенную категорию, а затем с помощью флажкаотфильтровать их с jquery .hide()?Я бы предпочел не использовать атрибут класса.Большое спасибо за огромную помощь!

Answer 1

Попробуйте это

<div id="abstract">
   <img src="1" />

   <img src="2" />
</div>

<div id="landscape">
   <img src="3" />

   <img src="4" />
</div>

$("input:checkbox").click(function(){
  $("#abstract, #landscape").hide();
  if($(this).is(":checked")){
     $("#"+$(this).val()).show();
  }
});

Answer 2

Попробуйте это: http://jsfiddle.net/shaneburgess/wTkR5/6/

$(document).ready(function(){

    $("#abstractCheck").change(function(){
       $(".abstract").toggle();
    });

     $("#landScapeCheck").change(function(){
       $(".landscape").toggle();
    });

});

HTML:

   <span class="abstract">
    <img src="1"/>
</span>

<span class="landscape">
   <img src="2" />
</span>

<span class="abstract">
   <img src="3" />
</span>

<span class="landscape">
   <img src="4" />
</span>

Answer 3

Вы можете использовать атрибут alt из img

<img src="1" alt="abstract"/>

и jquery:

$(document).ready(function(){
    $('input[name="abstract"]').click(function(){
       $('img[alt="abstract"]').toggle();
})

     $('input[name="landscape"]').click(function(){
       $('img[alt="abstract"]').toggle();
})

});

Answer 4

Для типа добавьте определенный класс (даже если вы не хотите ...)

$('input[value="landscape"]').click(function(){
    $('.landClass').toggle();
});

$('input[value="abstract"]').click(function(){
    $('.absClass').toggle();
});

Fiddle: http://jsfiddle.net/maniator/3bk22/