Jquery if statement for background image not working

Question

I have the condition:

console.log(jQuery(".sl-slide:visible .bg-img").css("background-image"));

if(jQuery(".sl-slide:visible .bg-img").css("background-image") == "url(http://pacificolife.com/wp-content/uploads/2016/08/bw1-1.jpg)")
{
    console.log("Here");
}

but when the background is equal to that url, nothing happens. What am I doing wrong?

Seems a thing you can simply solve by *debugging*. Learn how to do it, and you'll help yourself in the future. — trincot, Feb 27 '18 at 14:07
Please create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) of your problem — Liam, Feb 27 '18 at 14:10

score 1 · Accepted Answer · answered Feb 27 '18 at 19:23

That's because those are not the same strings:

var background = jQuery(".sl-slide:visible .bg-img").css("background-image"))

If you do that, background will have the value of url("http://pacificolife.com/wp-content/uploads/2016/08/bw1-1.jpg")

No matter if on your css file, you write:

.sl-slide:visible .bg-img {
  /* with '' */
  background-image: url("http://pacificolife.com/wp-content/uploads/2016/08/bw1-1.jpg");
  /* without '' */
  background-image: url(http://pacificolife.com/wp-content/uploads/2016/08/bw1-1.jpg);
}

The output will always be the same.

Solutions:

Do the comparsion with the exact same string.
Remove the URL(). Based on this answer:

Code:

var bg = jQuery(".sl-slide:visible .bg-img").css("background-image")); 
var url = bg.replace(/(?:^url\(["']?|["']?\)$)/g, "");
console.log(url === 'http://pacificolife.com/wp-content/uploads/2016/08/bw1-1.jpg');
// true

Check this fiddle

Jquery if statement for background image not working

1 Answers1