jquery change image src

Question

Код с $("#adminLink") работает просто отлично, но $("#itemLink") нет. Я пробовал все, что мог придумать. Кажется, мне нужны свежие глаза. Все, что я пытаюсь сделать, это изменить src этих двух img при щелчке элемента.

код:

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

Демо:http://jsfiddle.net/235ap/

Вы не увидите изображение изменения в демо, но если вы посмотрите на инспектора, он меняется.

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

в изменении функции выше, при выборе ссылки во второй раз. Вместо того, чтобы скользить вверх, он скользит вверх, а затем возвращается вниз. Ниже приведена та же функция, что и изменения, сделанные для правильной работы.

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

Вы не выложили HTML для меня, чтобы подтвердить это, но я хотел бы начать с основ - вы используете для верблюжьего второй элемент в массиве HidelemArr (addAdmin), но первый элемент в нем (additem) - все строчные буквы.

Проверьте свой HTML, чтобы гарантировать соответствие имен этой капитализации. Постарайтесь также стандартизировать свою капитализацию, если сможете.