10

的代码$("#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>
4

2 回答 2

21

演示：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() {});
    }
 }
于 2013-02-22T18:10:27.630 回答
1

您还没有为我发布 HTML 来确认这一点，但我将从基础开始 - 您将骆驼大小写用于HidelemArr数组中的第二项 ( addAdmin )，但其中的第一项 ( additem ) 都是小写的。

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

于 2013-02-22T17:34:48.893 回答