jquery改变图像src

Question

$("#adminLink") 的代码可以正常工作，但$("#itemLink") 不能。我已经尝试了我能想到的一切。我想我需要一双新鲜的眼睛。我要做的就是在单击元素时更改这两个 img 的 src。

代码：

$(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 以确保名称与该大写匹配。如果可以的话，也尝试标准化你的大写。