CODEWITHSUNDEEP
javascriptjquery
tonydolony
tonydolony

Reputation: 3

Sort images using radio and jQuery

Shortly speaking I want to sort Images which already exist depending on their categories using radio buttons - I'm trying do it via adding to special categories images different classes (I don't want to use any additional plugins like sortable etc.). #inside is the radio button id, I have this code:

$(function(){
    var allImage = $('img.group1');
    var insideImage = $('img.group1').hasClass('insideThis');
    $('#inside').on('click' , function() {
        if ($(this).is(':checked')) {
            $(allImage).fadeOut('500');
            $(insideImage).fadeIn('500');
            }
        else {
        }
    });
});

and my html looks like below:

<ul class="thumbnails image-sort">
          <li class="col-md-2 list-inline">
            <a class="thumbnail" rel="lightbox[group]" href="img/pics/1.jpg"><img class="group1 insideThis" src="images/10.png" title="Image Title" /></a>
          </li> <!--end thumb -->  
          <li class="col-md-2 list-inline">
            <a class="thumbnail" rel="lightbox[group]" href="images/10.jpg"><img class="group1 insideThis" src="images/10.png" title="Image Title" /></a>
          </li> <!--end thumb -->
          <li class="col-md-2 list-inline">
            <a class="thumbnail" rel="lightbox[group]" href="img/pics/1.jpg"><img class="group1" src="images/10.png" title="Image Title" /></a>
          </li> <!--end thumb -->
          <li class="col-md-2 list-inline">
            <a class="thumbnail" rel="lightbox[group]" href="img/pics/1.jpg"><img class="group1" src="images/10.jpg" title="Image Title" /></a>
          </li> <!--end thumb -->   
        </ul><!--end thumbnails -->

result is when click radio all of the images fadeOut but this image which has class insideThis doesn't want to show. I tried with addClass hidden and removeClass Hidden etc. but with no results. Any suggestions?

Upvotes: 0

Views: 39

Answers (1)

adeneo
adeneo

Reputation: 318372

jQuery's hasClass() returns a boolean, not elements, you probably wanted to select the element that has the class

var insideImage = $('img.group1.insideThis');

or as you already have a collection of the images, you can filter them without doing another DOM lookup

var allImage = $('img.group1');
var insideImage = allImage.filter('.insideThis');

Upvotes: 1

Related Questions