0

クリックした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";
}

}

ただし、Accordion（index）Title Divをクリックすると、最初のクリックで画像が変化しますが、もう一度クリックしても画像は元に戻りません。なぜそうなるのでしょうか？ここで何が欠けていますか？

4

1 に答える 1

0

関数に数値を渡す代わりに、要素自体を渡すことができ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/

于 2013-02-19T12:22:53.890 に答える