Question

I have <span> inside a <div>, like so:

<div id="#mydiv">
<a href="#">Hello</a><span class="myImageArea"></span>
    <div class="someClass">
    </div>
</div>                          

With the following CSS:

.myImageArea {  
    background: url("../img/upArrow.png") no-repeat right 5px;
    display: inline-block;
    cursor: pointer;
}

I want to change the attribute background:url of class myImageArea

$('#mydiv').click(function() {
    //change the background image of the class
});

How can this be done?

Answer 1

Within the click function you get a reference to the element you’ve clicked on, using jQuery’s selectors, you can now search inside that for the span. Once you have that you can then change the CSS property ‘background-image’:

$('#myDiv').click(function() {
    $('.myImageArea', this).css('background-image', 'newimagepath.png');
});