jquery che cambia immagine src

Question

Il codice con $("#adminLink") funziona correttamente, ma lo $("#itemLink") non funziona. Ho provato tutto quello che riesco a pensare. Penso di aver bisogno di un paio di occhi nuovi. Tutto quello che sto cercando di fare è cambiare l'src di questi due img quando viene cliccato un elemento.

codice:

$(document).ready(function() { 

    HidelemArr = new Array(); 
    HidelemArr[0] = "addItem"; 
    HidelemArr[1] = "addAdmin"; 
    //* hide presets 
    $.each(HidelemArr, function() { 
     $("#" + this).hide(); 
    }) 
    //* 

    $("#adminLink").click(function() { 
     var chld = $("#menuIMG"); 
     var vis = (document.getElementById(HidelemArr[1]).style.display == 'block') ? 1 : 0; 
     changeDisplay(HidelemArr[1], vis, chld); 
    }); 

    $("#itemLink").click(function() { 
     var chld = $("#Mitemimg"); 
     var vis = (document.getElementById(HidelemArr[0]).style.display == 'block') ? 1 : 0; 
     changeDisplay(HidelemArr[0], vis, chld); 
    }); 

}); 

function changeDisplay(id, vis, chld) { 

    $.each(HidelemArr, function() { 
     if ((this == id) && (vis == 0)) { 
      chld.attr("src", "images/icon_sync.gif"); 
      $("#" + this).slideDown('slow', function() {}); 
     } else { 
      chld.attr("src", "images/icon_trace.gif"); 
      $("#" + this).slideUp('slow', function() {}); 
     } 
    }) 

} 

html:

<ul> 
       <li class="header">Quick Access:</li> 

       <li ><span id="itemLink"> 
        <a >Add Item</a> 
        <img id="Mitemimg" class="qaimg" src="images/icon_trace.gif"></span></li> 

       <li ><span id="adminLink"> 
        <a >Add Administrator</a> 
        <img id="menuIMG" class="qaimg" src="images/icon_trace.gif"></span></li> 
      </ul> 
      </div> 

      <div id="main"> 
      <h1>Actions Required:</h1> 
      <div id="forms"> 
       <table class="linkForm" id="addItem"> 
       <?php require_once 'additemform.php'; ?> 
       </table> 
       <table class="linkForm" id="addAdmin"> 

        <?php require_once 'addAdminForm.php'; ?> 

       </table> 
      </div> 
      </div> 

Answer 1

Demo:http://jsfiddle.net/235ap/

Non vedrete l'immagine cambia nella demo, ma se si guarda l'ispettore, che sta cambiando.

HTML

<ul class="nav"> 
    <li class="header">Quick Access:</li> 
    <li>   
     <a id="itemLink" href="#">Add Item</a> 
     <img id="Mitemimg" class="qaimg" src="images/icon_trace.gif"> 
    </li> 
    <li> 
     <a id="adminLink" href="#">Add Administrator</a> 
     <img id="menuIMG" class="qaimg" src="images/icon_trace.gif"> 
    </li> 
</ul> 
<div id="main"> 
    <h1>Actions Required:</h1> 

    <div id="forms"> 
     <table id="addItem" class="linkForm" style="display: none;"> 
      <tr> 
       <td>addItemTable</td> 
      </tr> 
     </table> 
     <table id="addAdmin" class="linkForm" style="display: none;"> 
      <tr> 
       <td>addAdminTable</td> 
      </tr> 
     </table> 
    </div> 
</div> 

JS

$(document).ready(function() { 
    $('#adminLink').click(function(event) { 
     event.preventDefault(); 
     change('#menuIMG', '#addAdmin'); 
    }); 

    $('#itemLink').click(function(event) { 
     event.preventDefault(); 
     change('#Mitemimg', '#addItem'); 
    }); 

}); 

function change(imgId, divId) { 
    // reset img src 
    $('.qaimg').attr('src', 'images/icon_trace.gif'); 

    // set img src 
    $(imgId).attr('src', 'images/icon_sync.gif'); 

    // slide up all 
    $('#forms .linkForm').slideUp('slow', function() { 
     // slide down div 
     $(divId).slideDown('slow', function() {}); 
    }); 
} 

nel cambiamento suddetta funzione, quando è selezionato il collegamento per la seconda volta. Invece di scivolare verso l'alto, scivola verso l'alto e poi indietro. Di seguito è riportata la stessa funzione con le modifiche apportate affinché funzioni correttamente.

function change(imgId, divId) { 
     //check to see if div is visable 
     var vis = ($(divId).css('display') == 'none')? false:true; 

     // slide up all 
     $('#forms .linkForm').slideUp('slow', function() { }); 
     // reset img src 
     $('.qaimg').attr('src', 'images/icon_trace.gif'); 

    // if div isn't visable 
    if(!vis){ 
     // slide down div 
     $(imgId).attr('src', 'images/icon_sync.gif'); 
     // set img src 
     $(divId).slideDown('slow', function() {}); 
    } 
} 

Answer 2

Non hai inserito il codice HTML per me A conferma di ciò, ma mi piacerebbe iniziare con le basi - si sta utilizzando CamelCase per la secondo elemento nell'array HidelemArr (addAdmin), ma il primo elemento in esso (additem) è tutto in minuscolo.

Controllare il codice HTML per assicurarsi che i nomi corrispondano a tale maiuscola. Cerca di standardizzare anche la tua maiuscola, se puoi.