jquery改变图像src [英] jquery changing image src

查看：34
本文介绍了jquery改变图像src的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

代码:

$(document).ready(function () {HidelemArr = new Array();HidelemArr[0] = "addItem";HidelemArr[1] = "addAdmin";//* 隐藏预设$.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);});});功能 changeDisplay(id, vis, chld) {$.each(HidelemArr, function () {if ((this == id) && (vis == 0)) {chld.attr("src", "images/icon_sync.gif");$("#" + this).slideDown('slow', function () {});} 别的 {chld.attr("src", "images/icon_trace.gif");$("#" + this).slideUp('slow', function () {});}})}

html:

    <li class="header">快速访问:</li><li ><span id="itemLink"><a >添加项目</a><img id="Mitemimg" class="qaimg" src="images/icon_trace.gif"></span></li><li ><span id="adminLink"><a >添加管理员</a><img id="menuIMG" class="qaimg" src="images/icon_trace.gif"></span></li>

<div id="main"><h1>所需操作:</h1><div id="表单"><table class="linkForm" id="addItem"><?php require_once 'additemform.php';?><table class="linkForm" id="addAdmin"><?php require_once 'addAdminForm.php';?>

解决方案

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

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

HTML

    <li class="header">快速访问:</li><li><a id="itemLink" href="#">添加项目</a><img id="Mitemimg" class="qaimg" src="images/icon_trace.gif"><li><a id="adminLink" href="#">添加管理员</a><img id="menuIMG" class="qaimg" src="images/icon_trace.gif">
<div id="main"><h1>所需操作:</h1><div id="表单"><table id="addItem" class="linkForm" style="display: none;"><tr><td>addItemTable</td></tr><table id="addAdmin" class="linkForm" style="display: none;"><tr><td>addAdminTable</td></tr>

JS

$(document).ready(function () {$('#adminLink').click(function(event) {event.preventDefault();change('#menuIMG', '#addAdmin');});$('#itemLink').click(function(event) {event.preventDefault();change('#Mitemimg', '#addItem');});});功能更改(imgId，divId){//重置 img src$('.qaimg').attr('src', 'images/icon_trace.gif');//设置 img src$(imgId).attr('src', 'images/icon_sync.gif');//全部向上滑动$('#forms .linkForm').slideUp('slow', function() {//向下滑动div$(divId).slideDown('slow', function() {});});}

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

 函数更改(imgId, divId) {//检查div是否可见var vis = ($(divId).css('display') == 'none')?假:真；//全部向上滑动$('#forms .linkForm').slideUp('slow', function() { });//重置 img src$('.qaimg').attr('src', 'images/icon_trace.gif');//如果 div 不可见如果(！vis){//向下滑动div$(imgId).attr('src', 'images/icon_sync.gif');//设置 img src$(divId).slideDown('slow', function() {});}}

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.

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/

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

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

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

这篇关于jquery改变图像src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆