How to change css property of content:url in jquery?

Question

I have a problem:

<div id="arrow"></div>
<div id="p0" style="content: url(images/cerchioSelezionato.png)"></div>
<div id="p1" style="content: url(images/cerchio.png)"></div>

My goal is: when i click on #arrow element, I want that the image of #p0 become cerchio and vice versa for this I wrote this code in jQuery:

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").attr({content:url(images/cerchioSelezionato.png)});
       $("#p0").attr({content:url(images/cerchio.png)});
    }
}

When I click on arrow in chrome the console gives me this error:

Uncaught ReferenceError: url is not defined 
slider_script.js:12(anonymous function)     slider_script.js:12m.event.dispatch jquery-1.11.1.min.js:3r.handle

Answer 1

Use .css() instead of .attr() to manipulate the style. Also, I think you forgot to quote.

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").css({content:'url(images/cerchioSelezionato.png)'});
       $("#p0").css({content:'url(images/cerchio.png)'});
    });
});

While the keys don't have to be quoted in Javascript object, the values have to be.

Since you only change the content you can use the syntax .css('content', ... ) instead of the object notaion. I kept it the way you did it so you may add rules in the future.

Answer 2

Try ...

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").attr({style: "content:url(images/cerchioSelezionato.png)" });
       $("#p0").attr({style: "content:url(images/cerchio.png)" });
    }
}

You're changing the Style attribute, but the content attribute.

Answer 3

you can try this one also

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").css('content','url(images/cerchioSelezionato.png)');
       $("#p0").css('content','url(images/cerchio.png)');
    }
}