CODEWITHSUNDEEP
javascriptjquery
ndisdabest
ndisdabest

Reputation: 329

Can't get jquery If-Else to function properly

It might be that I've been staring at this for too long, and the function I've written isn't really that complicated, but for whatever reason, I cannot get this to function properly. The h1 tag changes as it should, but my if-else doesn't seem to be functioning based on the "page_layout" variable. My code is below... any ideas? 

<script>
    $(document).ready(
     function() {
         //Set text for H1 tags here
         var title = "Test title";

         //Set main-image layout here (1,2,3,4)
         var page_layout = "1";

         //If page_layout = 4, then set connected-image for top
         var connected_image = "images/connected-image.jpg";

         //Image for main-image area
         var main_image = "images/main-image.jpg";

         //Set main-image text here
         var main_image_text = "See how this works.";

         //Set main-image-text-url location
         var main_image_text_url = "http://www.example.com";

         //Do not touch this code
        $('h1').html(title);

        if (page_layout == "1"){
            $.('#main-image').css('background-image', main_image);
            $.('#main-image').css('background-position', 'top right');
            $.('#main-image').css('background-repeat','no-repeat');
            $.('#main-image').addClass('padding-21');
            $.('#main-image').html(main_image_text);
            $.('#main-image').append('<br><a href="' + main_image_text_url + '">tell me more</a>');
        }else if (page_layout == "2"){
            $.('#middle').css('font-size','15px');
            $.('#main-image').addClass('padding-21');
            $.('#main-image').html(main_image_text);
            $.('#main-image').append('<br><a href="' + main_image_text_url + '">tell me more</a>');
        }else if (page_layout == "3"){
            $.('#main-image').css('background-image', main_image);
            $.('#main-image').css('background-position', 'top left');
            $.('#main-image').css('background-repeat','no-repeat');
            $.('#main-image').addClass('padding-491');
            $.('#main-image').html(main_image_text);
            $.('#main-image').append('<br><a href="' + main_image_text_url + '">tell me more</a>');
        }else if (page_layout == "4"){
            $.('connected-image').css('background-image', connected_image );
            $.('connected-image').css('background-position', 'top right');
            $.('connected-image').css('background-repeat','no-repeat');
        }else{
            //Nothing
        }
     }
    )
</script>

Upvotes: 0

Views: 122

Answers (3)

nkha
nkha

Reputation: 161

Within each if-else block, add: 

console.log("This is case 1");

// ... do this inside each if-else {...}

console.log("This is case 4");

Then reload the page with firebug console open, and check if the blocks are executing. If they are, then you know your if-else conditions are working fine, and it must be a problem with the statements inside the if-else blocks.

Upvotes: 0

heisenberg
heisenberg

Reputation: 9759

There may be other issues as its not really clear what behavior you're seeing, but you shouldn't need periods in between the $ and open parens.

ie

$('connected-image').css('background-repeat','no-repeat');

not

$.('connected-image').css('background-repeat','no-repeat');

Upvotes: 2

jrummell
jrummell

Reputation: 43077

For starters, you should be seeing some syntax errors in the javascript console. You need to change your selectors from $.('selector') to $('selector') (remove the . after $).

Also, $('connected-image') should probably be using a class selector $('.connected-image').

Upvotes: 2

Related Questions