web-dev-qa-db-fra.com

jquery changer l'image src

Le code avec $("#adminLink") fonctionne très bien, mais pas la $("#itemLink"). J'ai essayé tout ce à quoi je peux penser. Je pense que j'ai besoin d'une nouvelle paire d'yeux. Tout ce que j'essaie de faire est de changer le 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>
jqueryimagesrc
9
Trae Moore

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

Vous ne verrez pas l'image changer dans la démo mais si vous regardez l'inspecteur, elle change.

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

dans le changement de fonction ci-dessus, lorsque le lien est sélectionné pour la deuxième fois. Au lieu de glisser vers le haut, il glisse vers le haut puis vers le bas. Vous trouverez ci-dessous la même fonction avec les modifications apportées pour qu'elle 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() {});
    }
 }
20
Ludovic Guillaume

Vous n'avez pas publié le code HTML pour que je confirme cela, mais je commencerais par les bases - vous utilisez camelcase pour le deuxième élément du tableau HidelemArr (addAdmin), mais le premier élément qu'il contient (additem) est tout en minuscules.

Vérifiez votre code HTML pour vous assurer que les noms correspondent à cette capitalisation. Essayez aussi de standardiser votre capitalisation si vous le pouvez.

1
toomanyredirects