jquery改变图像src

2024-05-22

代码与$("#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:

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

Demo: http://jsfiddle.net/235ap/ 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() {});
    }
 }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jquery改变图像src 的相关文章

随机推荐

  • C#中如何检测字符串是否为货币

    通常当我需要转换时currency string 如 1200 55 z 或 1 249 到十进制值我这样做 if currencyString Contains z decimal value Decimal Parse dataToCh
  • 我可以使用反射更改 C# 中的私有只读字段吗?

    我想知道 由于很多事情都可以使用反射完成 我可以在构造函数完成执行后更改私有只读字段吗 注 只是好奇 public class Foo private readonly int bar public Foo int num bar num
  • 如何改进 kubernetes 集群容器中的随机数生成?

    我发现运行的容器内的随机数生成存在一些问题 在 kubernetes 集群中 重复值 可能是缺乏熵 在容器内部 或者它可能是更高级别的其他东西 但是 我想研究熵角 我有几个问题 很难找到答案 proc sys kernel random e
  • 高级 Win32 图像文件 I/O?

    我想在 Windows C 应用程序中将图像文件读入内存 什么是一个相当简单的解决方案 也许类似于 IOS 提供的UIImage 我希望支持合理数量的文件格式 我需要为图像处理的位图提供一些低级访问权限 我在互联网上阅读了很多内容 看起来
  • 如何在代码块中包含内部引用?

    在我的 Sphinx rst 文档中 我有一个代码块 其中包含使用 UNIX 的产品结构的树视图tree命令 parent child grandchild 它位于代码块中 以便 Sphinx 保留空格 我希望读者能够单击每个节点来关注内部
  • 使用 SQL 扩展事件捕获链接服务器查询

    我尝试了许多事件类型 但无法实现链接服务器的日志记录 我可以找出所有其他数据库的事件 但对于链接服务器却没有运气 有什么建议 您可以使用OLEDB DATA READ跟踪对链接服务器的查询的事件 如果此事件的结果比您想要的更详细 您可能需要
  • Play Framework 2.5.1 路由和依赖项注入(适用于 Java)

    我的 路线 文件中有这个 POST accounts controllers AccountsController createOneAccount 在我的 AccoutsController java 中 package controll
  • 如何在 Perl 字符串中手动插入字符串转义符?

    在perl中假设我有一个像这样的字符串 hello tworld n 而我想要的是 hello world 也就是说 hello 然后是文字制表符 然后是 world 然后是文字换行符 或者等价地 hello tworld n 注意双引号
  • pyspark.sql.functions.window 函数的“startTime”参数和 window.start 有何作用?

    示例如下 df spark createDataFrame 1 2017 05 15 23 12 26 2 5 1 2017 05 09 15 26 58 3 5 1 2017 05 18 15 26 58 3 6 2 2017 05 15
  • CloudKit 和 Core 在设备之间同步数据

    我创建了一个简单的Notes应用程序基于Core data 现在我想在用户设备之间添加同步 以及我读过的所有文章 this https www raywenderlich com 134694 cloudkit tutorial getti
  • 使用 google apps 脚本添加大量响应

    我想制作一个脚本 添加大量 大约 1500 简历和候选人信息作为对表单的回复 我有谷歌电子表格的信息 我将其链接到表单 但我只能管理回复 即使我更改电子表格 或添加 表单中也不会发生更新 我正在添加行 但没有添加响应 那可能吗 我看到了 2
  • 为什么 Bootstrap 需要 jQuery? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我已经多次用谷歌搜索这个问题 但从未找到满意的答案 大多数答案似乎只是说 是的 Bootstrap 插件确实需要 jQuery https st
  • Azure 网站和有状态 WebApp

    我有一个 PokerApp 的简单版本作为 Azure 网站运行 服务器在内存中存储牌桌的状态 轮到谁 盲注值 牌 等 这里的问题是我不知道我可以在多大程度上依赖WebServer的内存来实现 永久 简单地重新启动服务器就会导致内存丢失 因
  • 解密/读取/修改“.automaticDestinations-ms”和/或“.customDestinations-ms”

    有谁知道如何读取 Microsoft 为 JumpList 创建的文件 我想从 JumpList 中清除所有历史记录 最常访问的 最近关闭的 而不清除任务 我尝试使用 win7api 中的 APPID 并清除例如 google chrome
  • ASP.NET MVC 5 属性路由:Url.Action 返回 null

    我在重构我们的支付处理操作方法 由我们的第 3 方在线支付提供商调用 时遇到问题 我们有一个产品控制器 Authorize and RoutePrefix products 类级别的属性和操作方法 包括以下内容 Product string
  • 从 SQL 数据库获取日期时间

    我的数据库表中有一个 DateTime 记录 我编写一个查询从数据库中获取它 string command2 select Last Modified from Company Data where Company Name Descrip
  • 如何将表移动到 T-SQL 中的架构中

    我想使用 T SQL 将表移动到特定架构中 我正在使用 SQL Server 2008 ALTER SCHEMA TargetSchema TRANSFER SourceSchema TableName 如果你想搬家all表到一个新的模式
  • 使用 RestKit 对象映射空响应

    感谢在这里帮忙 https stackoverflow com questions 9743155 restkit mapping with an array of complex objects在 RestKit 邮件列表上 我已经能够解
  • 如何自定义 DataTable 列的排序

    我需要对数据表列的值进行排序 该列包含字符串 整数或混合文本 例如 数据表列包含如下值 23 18 12 store 23 store a1 1283 25 如果我使用对值进行排序Dataview sort 方法会按此顺序产生 12 128
  • jquery改变图像src

    代码与 adminLink 工作得很好 但是 itemLink 没有 我已经尝试了我能想到的一切 我想我需要一双新鲜的眼睛 我想做的就是在单击元素时更改这两个 img 的 src code document ready function H