Home/ Questions/Q 612249
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:52:21+00:00

<!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

  • 0
<!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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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');
        }

    });

});
    • 0