Hình ảnh thay đổi jquery src

Question

Mã với $("#adminLink") hoạt động tốt, nhưng $("#itemLink") thì không. Tôi đã thử mọi thứ tôi có thể nghĩ đến. Tôi nghĩ tôi cần một đôi mắt mới. Tất cả những gì tôi đang cố gắng làm là thay đổi src của hai img này khi một phần tử được nhấn.

mã:

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

Bạn sẽ không thấy hình ảnh thay đổi trong bản demo nhưng nếu bạn nhìn vào thanh tra, nó đang thay đổi.

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

trong sự thay đổi chức năng trên, khi liên kết được chọn để lần thứ hai. Thay vì trượt lên, nó trượt lên và sau đó trở xuống. Dưới đây là chức năng tương tự với các thay đổi được thực hiện để hoạt động bình thường.

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

Bạn chưa đăng HTML cho tôi để xác nhận điều này nhưng tôi muốn bắt đầu với những điều cơ bản - bạn đang sử dụng camelcase cho mục thứ hai trong mảng HidelemArr (addAdmin), nhưng mục đầu tiên trong đó (additem) là chữ thường.

Kiểm tra HTML của bạn để đảm bảo các tên khớp với cách viết hoa đó. Hãy thử chuẩn hóa cách viết hoa của bạn nếu bạn có thể.