Pourquoi mon image de fond Jquery n'est pas commutée?

Question

Heres mon Jquery

$(document).ready(function(){ 
$('a.toggle').css('background-image','url(http://blah/resources/img/close.gif)'); 

$(".sectiontitle").click(function(e){ 
    $(this).next('div').slideToggle("slow"); 

    el = $(this).find(".toggler > a.toggle"); 

    currBg = el.css('background-image'); 
    if (currBg=="url(http://blah/resources/img/close.gif)"){ 
    currBg="url(http://blah/resources/img/open.gif)"; 
    console.log('open gif'); 
    } 
    else{ 
    currBg="url(http://blah/resources/img/close.gif);" 
    console.log('close gif'); 
    } 
    console.log(currBg); 
    el.css('background-image',currBg); 

    return false; 
}); 

});

Heres mon panneau html (dont il y a beaucoup)

<div class="majorsection"> 

    <div class="sectiontitle"> 
     <h2>Restaurant Bookings</h2> 
     <div class="toggler"> 
      <a title="click to hide" class="toggle" href="http://blah/index.php/console/index"><span>-</span></a> 
     </div> 
     <div class="clear"></div> 
    </div> 
    <div class="msectioninner"> 
<div class="minorsection"> 
    <div class="sectionlist"> 
        <div class="section"></div> 
    </div> 
    <div class="sectionoptions"> 
     <div class="clear"></div> 
    </div> 
</div> 
    </div> 
</div> 

Les commutateurs d'image sur le premier clic et le panneau glisse tous refroidissent les deux sens, mais l'image ne marche pas revenir

Answer 1

Pourquoi ne pas utiliser deux classes CSS à la place. Il rendra le code beaucoup plus propre et maintenable.

A défaut d'une chose à faire est de changer

.css('background-image', currBg) 

à

.css('backgroundImage', currBg) 

Je me souviens qu'il y avait un problème avec cette (mais pensait qu'il avait été fixé). Si cela ne fonctionne pas, avez-vous une URL montrant le problème?

Answer 2

Avez-vous essayé console.log(currBg); juste après l'avoir récupéré? La propriété url() peut être réécrite/résolue. Pas sûr - mais un problème similaire se pose si vous testez le .attr ('src') d'une image - ce n'est peut-être plus ce que vous avez défini.

Une suggestion cependant: Plutôt que de coder en dur les valeurs d'image d'arrière-plan, envisager de faire quelque chose comme:

$(document).ready(function(){ 
    $('a.toggle').addClass('closed'); 
    $(".sectiontitle").click(function(e){ 
    $(this).next('div').slideToggle("slow"); 
    el = $(this).find(".toggler > a.toggle"); 
    // jQuery 1.3 has this: 
    // el.toggleClass('.closed'); 
    // otherwise - use this: 
    if (el.is('.closed')) 
    { 
     el.removeClass('closed'); 
    } else { 
     el.addClass('closed'); 
    } 
    return false; 
    }); 
}); 

Ensuite, votre a.toggle reprend la propriété background-image du "ouvert" et a. toggle.closed obtient l'image "fermée" dans vos fichiers CSS.