Question

您好我在尝试使用Javascript切换单击时div的背景图像

这是我为实现这一目标所做的工作：

我的代码如下

HTML：

<div id="AccordionContainer" class="AccordionContainer">
    <div onclick="runAccordion(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 by clicking on the title of... </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>
</div>

使用Javascript：

function changeArrow(index)
{
    var arrowID = "Accordian" + index + "Title";    
    document.getElementById(arrowID).style.background="url(./img/accordian-title-up.png) no-repeat scroll 0 0 transparent"; 
}

但是，当我点击包含onclick =＆＃34; runAccordion（index）;＆＃34;

的div时，没有任何反应

我在这里缺少什么？

Answer 1

runAccordion可能会覆盖或阻止changeArrow，具体取决于HTML的结构。尝试将它们组合在同一个onclick监听器（runAccordion(1);changeArrow(1);）中，看看那里发生了什么。

~~此外，如果您已修复此问题，请检查您的图片路径。~~

修改

你有一个错字：

var arrowID = "Accordian" + index + "Title";

应该是：

var arrowID = "Accordion" + index + "Title";

使用Javascript在点击时切换div的背景图像

1 个答案: