jQuery jquery改变图像src

jquery changing image src

提问by Trae Moore

The code with $("#adminLink")works just fine, but the $("#itemLink")doesn't. I've tried everything I can think of. I think i need a fresh pair of eyes. All I'm trying to do is change the src of these two img when an element is clicked.

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

code:

代码：

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

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>

回答by Ludovic Guillaume

Demo:http://jsfiddle.net/235ap/

演示：http : //jsfiddle.net/235ap/

You won't see the image changing in the demo but if you look at the inspector, it's changing.

您不会在演示中看到图像发生变化，但是如果您查看检查器，它会发生变化。

HTML

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

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

in above function change, when the link is selected for the second time. In stead of sliding up, it slides up and then back down. Below is the same function with changes made for it to work properly.

在上述功能更改中，当第二次选择链接时。它不是向上滑动，而是向上滑动然后向下滑动。下面是相同的功能，但对其进行了更改以使其正常工作。

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

回答by toomanyredirects

You haven't posted the HTML for me to confirm this but I'd start with the basics - you're using camelcase for the second item in the HidelemArrarray (addAdmin), but the first item in it (additem) is all lowercase.

您还没有为我发布 HTML 来确认这一点，但我将从基础开始 - 您正在将驼峰命名用于HidelemArr数组中的第二项( addAdmin)，但其中的第一项 ( additem) 全部为小写。

Check your HTML to ensure the names match up with that capitalisation. Try to standardise your capitalisation too if you can.

检查您的 HTML 以确保名称与该大写匹配。如果可以，也尝试标准化您的大写。