Using attribute ends with selector to add a class

Question

I'm trying to change the color of a font based on the background-image of the page.

I've looked through every posting I could find about this but I can't figure out the correct syntax for my specific application.

I'm trying to write a function that says "If the background-image of body ends with "-dark.png" add the class .dark to nav.

Here's what I have:

function colorChange(){
    var b = $('body').css('background-image');

    if (b $==='-dark.png'){
        $("nav").addClass("dark");
    }
}

I appreciate any help!

Answer 1

The $== operator is not valid in JS. To find out if a string ends with a specific set of characters you can use a regex:

function colorChange(){
    var b = $('body').css('background-image');
    if (b.test(/-dark.png$/i)) {
        $("nav").addClass("dark");
    }
}

Or also substr():

function colorChange(){
    var b = $('body').css('background-image');
    var match = '-dark.png';
    if (b.length > match.length && b.substr(-match.length) == match) {
        $("nav").addClass("dark");
    }
}

Answer 2

You need to use regex:

function colorChange(){
    var b = $('body').css('background-image');
    if(b.match(/-dark.png"\)$/)){
        $("nav").addClass("dark");
    }
}

I added "\) before $ because that's how this string (url) ends.

Answer 3

I don't think you can use ends with as image url will be wrapped in url() so you can check indexOf()

function colorChange() {
    var b = $('body').css('background-image');

    if (b.indexOf('-dark.png') > -1) {
        $("nav").addClass("dark");
    }
}

Answer 4

Hello Mark Pfaff, here is your answer according to what i understood about your question, it may solve your purpose

      function colorChange(){
            var b = $('body').css('background-image');
            b = b.replace('url("','').replace('")','');
            b = b.substr(b.lastIndexOf('/') + 1);
            if (b === 'dark.png'){
                $('nav').addClass("dark");
            }
        }

Hope it will help you..