jquery zmiana obrazu src

Question

Kod z $("#adminLink") działa dobrze, ale $("#itemLink") nie. Próbowałem wszystkiego, co potrafię wymyślić. Myślę, że potrzebuję świeżej pary oczu. Wszystko, co próbuję zrobić, to zmienić src tych dwóch plików img po kliknięciu elementu.

Kod:

$(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/

Nie zobaczysz obraz zmienia się w demo, ale jeśli spojrzeć na inspektora, to nic nie zmienia.

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() {}); 
    }); 
} 

w powyższej zmiany funkcji, gdy związek jest wybrany po raz drugi. Zamiast przesuwać się, przesuwa się w górę, a następnie z powrotem w dół. Poniżej znajduje się ta sama funkcja z wprowadzonymi zmianami, aby działał poprawnie.

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

Nie napisali HTML dla mnie, aby to potwierdzić, ale zacznę od podstaw - używasz CamelCase dla Druga pozycja w tablicy HidelemArr (addAdmin), ale pierwsza pozycja w nim (additem) jest pisana małymi literami.

Sprawdź kod HTML, aby upewnić się, że nazwy pasują do tej wielkości pisanej wielkimi literami. Spróbuj też ujednolicić swoją wielkość liter, jeśli możesz.