CODEWITHSUNDEEP
javascriptjqueryhtml
user1053263
user1053263

Reputation: 742

is(:visible) selector not working on class jQuery

Not sure how to explain this, I made a fiddle of what I'm attempting to do: http://jsfiddle.net/x2btM/9/

here's my code: HTML:

<div id="ZodOneDragBox">
    <div id="aquariusSelectedComp1" class="killSelectedComp1" style="display:none;">
        <img src="some.jpg">
    </div>
</div>

<div id="ZodTwoDragBox">
    <div id="aquariusSelectedComp2" class="killSelectedComp2" style="display:none;">
        <img src="some.jpg" width="45" height="45">
    </div>
</div>


<div id="aquariusIcnClick" class="iconClicker">
        <img src="some_Icon.jpg" width="45" height="45">
</div>

Here's my jquery:

if ($('.killSelectedComp1').is(':visible')) {
    //--SELECT BOX TWO
    $('#aquariusIcnClick').click(function() {
        $('.killSelectedComp2').hide();
        $('#aquariusSelectedComp2').show();
    });


}
else {
    //--SELECT BOX ONE
    $('#aquariusIcnClick').click(function() {
        $('.killSelectedComp1').hide();
        $('#aquariusSelectedComp1').show();
    });

}​

Basically when you click on aquariusIcnClick the image aquariusSelectedComp1 will appear in div ZodOneDragBox. aquariusSelectedComp1 with the class of killSelectedComp1 is now visible, so when you click on the icon aquariusIcnClick again, the image should appear in ZodTwoDragBox. It works for the first box, but the selector is not reading that the image with the corresponding class is currently visible therefor executing what's in the if statement and showing the image in the second box. Hope I explained this well enough, once again, here's my fiddle:

http://jsfiddle.net/x2btM/9/

Not sure what I'm doing wrong, I've googled to make sure that I'm using the :visible selector correctly any and all help is very much appreciated. Thank you ​

Upvotes: 2

Views: 2634

Answers (3)

Adil
Adil

Reputation: 148120

Do not bind event condition rather put condition in the event

Live Demo

$('#aquariusIcnClick').click(function() {
    if ($('.killSelectedComp1').is(':visible')) {
        $('.killSelectedComp2').hide();
        $('#aquariusSelectedComp2').show();
    }
    else {
        $('.killSelectedComp1').hide();
        $('#aquariusSelectedComp1').show();
    }
});​

Upvotes: 2

Pebbl
Pebbl

Reputation: 36005

Your code is only being executed once when the page loads / or the dom is ready. This means that your if statement is only tested once. You need to modify your code so that the if statement occurs within the click handler. This will mean the visibility of killSelectedComp1 is tested each time the click occurs and you can then make your decision on what to do.

As @rahul has done ;)

Upvotes: 2

rahul
rahul

Reputation: 7663

you don't need bind your click on div condition instead check your div visibility onclick 

    $('#aquariusIcnClick').click(function() {
         if ($('.killSelectedComp1').is(':visible')) {       
           $('.killSelectedComp2').hide();
           $('#aquariusSelectedComp2').show();
         }
         else
         {
           $('.killSelectedComp1').hide();
           $('#aquariusSelectedComp1').show();
         }
    });

Live Demo ​

Upvotes: 7

Related Questions