如何使用Javascript基于图像URL切换背景图像

Question

I want to change a background image on click based upon the url of the DIV that I have clicked

My logic works as follows:

When a users clicks a div

 {

    If (Background URL = x)
    {
       change background url property to y
    }
    else
    {
       change background url property to x
    }
 }

Here is the code I used

HTML:

<div id="AccordionContainer" class="AccordionContainer">

    <div onclick="runAccordion(1);changeArrow(1)">
        <div class="AccordionTitle" id="Accordion1Title" onselectstart="return false;" onclick="changeArrow(1);" >
            Instructions
        </div>
    </div>

    <div id="Accordion1Content" class="AccordionContent">  
        <p>Enter in your search parameters</p>
    </div>

    <div onclick="runAccordion(2);">
        <div class="AccordionTitle" id="Accordion2Title" onselectstart="return false;" onclick="changeArrow(2);" >
            Colour
        </div>
    </div>

    <div id="Accordion2Content" class="AccordionContent">  
        [wpv-control field="cultivar-category" type="checkboxes" values="Dark Red" url_param="cultivar-category"]
    </div>

</div>

Javascript

function changeArrow(index)
{
    var arrowID = "Accordion" + index + "Title";    

    var img = document.getElementById(arrowID),
    style = img.currentStyle || window.getComputedStyle(img, false),
    bi = style.backgroundImage.slice(4, -1);


if (bi = "http://www.hadecobulbs.com/wp-content/themes/blankslate/img/accordian-title.png")
{
    document.getElementById(arrowID).style.background="url(http://www.hadecobulbs.com/wp-content/themes/blankslate/img/accordian-title-up.png) no-repeat scroll 0 0 transparent";
}
else
{
    document.getElementById(arrowID).style.background="url(http://www.hadecobulbs.com/wp-content/themes/blankslate/img/accordian-title.png) no-repeat scroll 0 0 transparent";
}

}

However when I click on the Accordion(index)Title Div the image changes upon first click but when I click again the image does not change back. Why would this be the case? What am I missing here?

Answer 1

Instead of passing a number to the function you could pass the element itself using this which means you can reduce the amount of code you write considerably.

Call the function on your div like this

<div class="background_one" onClick="changeArrow(this)"> </div>

Using @d4rkpr1nc3's comment setup your css classes to change the background image like so

.background_one {
width:188px;
height:32px;
background-image:url('wp-content/themes/blankslate/img/accordian-title-up.png');
}

.background_two {
width:188px;
height:32px;
background-image:url('wp-content/themes/blankslate/img/accordian-title.png');
}

Then do something like this in your function

function changeArrow(element){

  var arrow = element;

    if(arrow.className == 'background_one'){

      arrow.className = 'background_two';

    } else {

      arrow.className = 'background_one';

    }

}

Here is a jsfiddle - http://jsfiddle.net/QwELf/