Replace CSS property with jQuery conditional

Question

I want to change the background image of a link used to switch the language on my website. My approach was to check which language code is inside the tags, and then change the background image using jQuery.

The code below changes the background image to the first background-image in the conditional statement. But when the conditional is not met, and the second statement should be executed, it still executes the first (or fails to execute somehow). The console shows no errors.

The last li-element is generated by a PHP script, which could be tweaked to include a -data attribute as suggested in the comments. Which would be an excellent improvement. At the current time it just returns the language code as plain text in a list item.

HTML

<nav id="top-menu">
  <ul id="menu-top" class="nav et_disable_top_tier sf-js-enabled">
    <li id="menu-item-263"><a href="/">Home</a></li>
    <li id="menu-item-265"><a href="services">Services</a></li>
    <li id="menu-item-412"><a href="/blog/">Blog</a></li>
    <li><a href="/en/" style="background-image: url(https://www.example.nl/wp-content/themes/GH/images/flagUK.gif);">EN</a></li>
  </ul>
</nav>

CSS

ul#menu-top > li:last-child > a {
    text-indent: -9999px;
    display: block;
    height: 12px;
    width: 18px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

The jQuery code:

$(document).ready(function(){
    lang_flags_append();

    function lang_flags_append() {
        var $l = $( "ul#menu-top > li:last-child > a" ).text();
        console.log($l);
        $( "ul#menu-top li:last-child > a" ).css("background", "");
        if ( $l = 'EN' ) {
            $( "ul#menu-top > li:last-child > a" ).css("background-image", "url('https://www.example.nl/wp-content/themes/GH/images/flagUK.gif')");
        } else if ($l = 'NL') {
            $( "ul#menu-top > li:last-child > a" ).css("background-image", "url('https://www.example.nl/wp-content/themes/GH/images/flagNL.gif')");
        }
    }
});

if ( $l === 'NL' ): you are assigning, not comparing. that's why the first branch is always executed — Fabrizio Calderan
– Fabrizio Calderan, Commented Jul 22, 2015 at 8:48
An anchor element cannot contains another anchor element, something is wrong in your selector or HTML markup. For the rest, as i can see, see @TrueBlueAussie's asnwser — A. Wolff
– A. Wolff, Commented Jul 22, 2015 at 8:51
Added update to cover what I think you wanted. Please provide the HTML for examples like this to avoid confusion. Your current code was hard-wired to only process the first link (by the look of it). — iCollect.it Ltd
– iCollect.it Ltd, Commented Jul 22, 2015 at 9:07

iCollect.it Ltd · Accepted Answer · 2015-07-22 09:05:46Z

2

Anchors elements do not have a val() to return.

Use text() or a data- attribute

Also (as @Fabrizio Calderan mentioned) you are using a assign = and not compare == or ===

e.g.

if ( $l == 'NL' )

Also as @A. Wolff points out, your selector is broken too (it looks for an anchor within the anchor):

e.g this is enough to find the anchor:

$( "ul#menu-top li:last-child > a" )

Your best bet is to use data- attributes that contain the country code. Then you can use them to select the image.

$(document).ready(function(){

    var lang = $( "ul#menu-top li:last-child > a" ).data('lang');

    $( "ul#menu-top > li:last-child > a" ).css("background-image", "url('https://www.example.nl/wp-content/themes/GH/images/flag" + lang + ".gif')");
});

and your anchor would have

<a href="blahblah" data-lang="NL">My anchor</a>

Update:

After re-reading, I see you apparently want to do this to all your flag links.

In that case use each() to iterate them:

e.g.

$(function(){
    $( "ul#menu-top li > a" ).each(function(){
        var lang = $(this).data('lang');
        $(this).css("background-image", "url('https://www.example.nl/wp-content/themes/GH/images/flag" + lang + ".gif')");
   });
});

Note: $(function(){ is just a handy shortcut for $(document).ready(function(){

edited Jul 22, 2015 at 9:05

answered Jul 22, 2015 at 8:47

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

7 Comments

iCollect.it Ltd Over a year ago

Please explain downvotes. Don't just just hit & run! :)

A. Wolff Over a year ago

$( "ul#menu-top li:last-child > a" ).find("a") looks wrong too ;)

iCollect.it Ltd Over a year ago

@A.Wolff: Thanks. Added that too as well as alternate suggestion. So many errors... so little time :)

SdeWijs Over a year ago

I have used the text() function and it returns the correct value. I also removed the .find("a") because I was already selecting the <a>tag. However, the conditional statement still returns the first value in all cases. I have updated my code above.

iCollect.it Ltd Over a year ago

Please a) follow my suggestion to replace the code with data attributes and b) provide your HTML as we can't see why you select the last-child link only :)

|

Collectives™ on Stack Overflow

Replace CSS property with jQuery conditional

1 Answer 1

Update:

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update:

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related