[英]How to Toggle background image based on Image URL using Javascript
我想基于单击的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>
Java脚本
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";
}
}
但是,当我单击Accordion(index)Title Div时,图像会在第一次单击时发生变化,但是当我再次单击时,图像不会变回原样。 为什么会这样呢? 我在这里想念什么?
不用传递数字给函数,您可以使用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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.