如何在点击上交换图片？

我wnt交换图像点击，bt这里，如果m点击从下来的图像向上，但再次没有下来的图像，如果米点击该图像... m geting some error- x.attr（“src “）未定义如何在点击上交换图片？

$(document).ready(function() { 
    $('#sortdivlink').click(function() { 

     var x = $("img[src$='../Images/Sort_down.png'][name='stCodeDSC']"); 

     if (x.attr("SRC") == "../Images/Sort_down.png") { 
      x.attr('src', x.attr('src').replace("../Images/Sort_down.png", "../Images/sort_up.png")); 
     } 
     else { 
      x.attr('src', x.attr('src').replace("../Images/sort_up.png", "../Images/Sort_down.png")); 
     } 
    }); 
});

来源

2012-04-10 SHAURAJ SINGH

你可以显示一些标记请？ – 2012-04-10 14:24:07

选择器中的$做什么？ “img [src $ ='../Images/Sort_down.png'] [name ='stCodeDSC'] – Timmerz 2012-04-10 14:26:13

@Timmerz它的'属性以'选择符结束：http://api.jquery.com/attribute-ends- with-selector/ – 2012-04-10 14:28:16

你可以使用一个<div>与一个background-image和尺寸CSS类，并使用$（DIV）.toggleClass（“新形象”），以使用更新的background-image

，这将大大简化你的代码。

[编辑]

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <style> 
    .first-image 
    { 
     background-image: url('http://www.google.com/press/zeitgeist2001/google_logo.gif'); 
     width:218px; 
     height:90px; 
     background-position:center; 
     background-repeat:no-repeat; 
    } 

    .second-image 
    { 
     background-image: url('http://www.google.com/doodle4google/2008/images/regional_doodles/CO-80106-16a267f8-3.jpg'); 
     width:350px; 
     height:224px; 
     background-position:center; 
     background-repeat:no-repeat; 
    } 
    </style> 

    <script> 
    $(document).ready(function() 
    { 
     $("#target-div").click(function() 
     { 
      $("#target-div").toggleClass("second-image"); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <div id="target-div" class="first-image"></div> 
    </body> 
    </html>

来源

2012-04-10 14:28:35 Timmerz

做你有任何样本为此// – 2012-04-11 06:47:13

很高兴你问...发布了上面的工作版本 – Timmerz 2012-04-11 06:57:53

感谢兄弟.. :) – 2012-04-12 05:54:34

我猜想这是因为选择你使用分配x，这很可能返回null。我认为可能增加ID或CSS类的图像，然后选择简化到这样的事情：

var x = $('img.sortDirectionImage');

或者，如果你知道sortdivlink元素，只会有一个单一的形象，你可以简单地搜索该元素的上下文内的img元件，例如：

// within the click function scope 
var x = $('img', this);

编辑

此外，我建议使用多个R无法识别的变量名称;你可能知道x是什么，但下一个读取你的代码的人可能不会。

来源

2012-04-10 14:24:50 Richard

这也将解决问题，找到一个图像的src，然后更改src，因此不再找到它 – Archer 2012-04-10 14:27:42

看我的剧本我很久以前写的（没有任何的jQuery）：

function changeImg(element) { 
     var img = document.getElementById(element); 
     if (img.src == "../images/expand.png") { 
      // collapse 
      img.src = "../images/collapse.png"; 
     } 
     else { 
      // expand 
      img.src = "../images/expand.png"; 
     } 
    }

普通的HTML标记：

<span onclick="changeImg('ansprechpartner');return false;">...</span>

也许将为你工作...

来源

2012-04-10 14:37:48 jordi

回答

相关问题