基于使用Javascript

Question

我想根据我所点击

我的逻辑DIV的网址上点击更改背景图片作品图片URL如何切换背景图片如下：

当用户点击一个div

{ 

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

这里是我使用的代码

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"; 
} 

} 

然而，当我点击手风琴（指数）标题事业部在第一次点击的图像变化，但是当我再次点击该图像不会更改回。为什么会这样呢？我在这里错过了什么？

Answer 1

而不是将一个数字传递给该函数，您可以使用this来传递该元素本身，这意味着您可以减少大量写入的代码。

呼叫你的DIV功能这样

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

使用@ d4rkpr1nc3的评论设置你的CSS类来改变，像这样

.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'); 
} 

背景图片，然后做这样的事情在你的功能

function changeArrow(element){ 

    var arrow = element; 

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

     arrow.className = 'background_two'; 

    } else { 

     arrow.className = 'background_one'; 

    } 

} 

这是一个jsfiddle - http://jsfiddle.net/QwELf/