jquery changer d'image src

Le code avec $("#adminLink") fonctionne très bien, mais le $("#itemLink") ne l'est pas. J'ai essayé tout ce que je peux penser. Je pense que j'ai besoin d'une nouvelle paire d'yeux. Tout ce que je suis en train de faire est de changer la src de ces deux img lorsqu'un élément est cliqué.

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:

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

source d'informationauteur Trae Moore

  1. 20

    Démo: http://jsfiddle.net/235ap/

    Vous ne pourrez pas voir l'image en train de changer dans la démo, mais si vous regardez à l'inspecteur, il est en train de changer.

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

    au-dessus de modification de la fonction, lorsque le lien est sélectionné pour la deuxième fois. En lieu et place de glisse, elle glisse vers le haut et ensuite vers le bas. Ci-dessous est la même fonction avec des modifications pour qu'il fonctionne correctement. 

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

    Vous n'avez pas posté le HTML, pour moi, pour confirmer cela, mais j'aimerais commencer avec les bases, vous êtes à l'aide de camelcase pour le deuxième élément dans la HidelemArr array (addAdmin), mais le premier élément (additem) est en minuscules.

    Vérifier votre code HTML afin de s'assurer que les noms correspondent à celui de la capitalisation. Essayer de standardiser vos capitalisation trop si vous le pouvez.