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