Jquery, Click / If Else function, Not working

Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>If Else</title>
<script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
<style  TYPE="text/css"> 

    .show                                       { display:block; }
    .hide                                       { display:none; }

</style>
</head>
<body>
<script type="text/javascript">
$('#portweb').click(function() {

    if ('li[value*=web] img'.hasClass("hide")) {
        $('li[value*=web] img').removeClass('hide').addClass('show');
    }
    else if ('li[value*=web] img'.hasClass("show")) {
        $('li[value*=web] img').removeClass('show').addClass('hide');
    }

});
</script>

<a href="#" id="portweb">Web</a>
<br />

        <ul id="portfolioWrapperSet">
            <li value="web dev"><a href="#"><img src="images/portfilio/ph1.jpg" class="hide" /></a></li>
            <li value="web packaging print media"><a href="#"><img src="images/portfilio/ph2.jpg" class="hide" /></a></li>
            <li value="tv packaging print media"><a href="#"><img src="images/portfilio/ph3.jpg" class="hide" /></a></li>
            <li value="web packaging print media social"><a href="#"><img src="images/portfilio/ph4.jpg" class="hide" /></a></li>
        </ul>


</body>
</html>

So the problem im having is actually getting my function to remove the '.hide' class then add the '.show' class through my if statement.

Darin Dimitrov · Accepted Answer · 2010-02-10 17:49:26Z

2

You are trying to manipulate the DOM before it is ready. Try wrapping your code in a document.ready statement. Also in your ifs you are trying to call the hasClass method on a string which is not defined:

$(function() {

    $('#portweb').click(function() {

        if ($('li[value*=web] img').hasClass("hide")) {
            $('li[value*=web] img').removeClass('hide').addClass('show');
        }
        else if ($('li[value*=web] img').hasClass("show")) {
            $('li[value*=web] img').removeClass('show').addClass('hide');
        }

    });

});

answered Feb 10, 2010 at 17:49

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Starboy Over a year ago

Thanks Darin, this did work. Now I had this at one time in a $(document).ready(function(){ }); and still had no success, but thank you for your response. (this brought up another problem actually)

Russ Cam · Accepted Answer · 2010-02-10 17:49:25Z

1

You ought to use the .show() and .hide() methods really as what you're trying to do is what they were designed for.

You need to wrap your code into a function that will get executed when the ready event is raised

$(function() { /* code here */ });

So it should be like so

$(function() {

    $('#portweb').click(function() {

        if ('li[value*=web] img'.hasClass("hide")) {
            $('li[value*=web] img').removeClass('hide').addClass('show');
        }
        else if ('li[value*=web] img'.hasClass("show")) {
            $('li[value*=web] img').removeClass('show').addClass('hide');
        }

    });

});

answered Feb 10, 2010 at 17:49

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

1 Comment

Russ Cam Over a year ago

No probs. I would cache the jQuery object in a variable too so that you don't search the Dom each time to get the same elements

Keith Rousseau · Accepted Answer · 2010-02-10 17:50:35Z

0

Try changing your if conditional to something like this:

if ($('li[value*=web] img').hasClass("hide")) {
        $('li[value*=web] img').removeClass('hide').addClass('show');
    }
    else if ($('li[value*=web] img').hasClass("show")) {
        $('li[value*=web] img').removeClass('show').addClass('hide');
    }

answered Feb 10, 2010 at 17:50

Keith Rousseau

4,4931 gold badge24 silver badges28 bronze badges

Collectives™ on Stack Overflow

Jquery, Click / If Else function, Not working

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related