如何在点击时交换图像？
[英]how to swap image on click?
问题描述
i wnt to swap image on click,bt here if m clicking from down image to up but again its not coming on down image if m clicking on that image... m geting some error- x.attr("src") is undefined
我想在点击时交换图像，如果我从向下图像点击到向上图像，但如果我点击该图像，它又不会出现向下图像......我得到一些错误- 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"));
}
});
});
3 个解决方案
解决方案1
8 2012-04-10 14:24:50
I would imagine this is due to the selector you're using to assign x , which is likely returning null. I would consider maybe adding an Id or CSS class to the image, and then simplifying the selector to something like this:我想这是由于您用来分配x的选择器造成的，它可能会返回 null。我会考虑向图像添加一个 Id 或 CSS class，然后将选择器简化为如下所示：
var x = $('img.sortDirectionImage');
Alternatively, if you know that the sortdivlink element, will only have a single image, you could simply search for an img element within the context of that element, for example:或者，如果您知道sortdivlink元素将只有一个图像，您可以简单地在该元素的上下文中搜索img元素，例如：
// within the click function scope
var x = $('img', this);
Edit编辑
Additionally, I would recommend using more recognisable variable names;此外，我建议使用更易于识别的变量名称； you might know what x is, but the next person that comes to read your code might not.你可能知道x是什么，但下一个来阅读你的代码的人可能不知道。
解决方案2
2 已采纳 2012-04-10 14:28:35
you could use a <div> with a css class with a background-image and dimensions, and use $(div).toggleClass("new-image") to use the updated background-image您可以使用带有background-image和尺寸的 css class 的<div> ，并使用 $(div).toggleClass("new-image") 来使用更新的background-image
that will greatly simplify your code.这将大大简化您的代码。
[EDIT] [编辑]
<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>
解决方案3
1 2012-04-10 14:37:48
Look at my script I wrote long time ago (without any jQuery):看看我很久以前写的脚本（没有任何 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";
}
}
Normal HTML-Markup:普通 HTML 标记：
<span onclick="changeImg('ansprechpartner');return false;">...</span>
Maybe it will work for you...也许它会为你工作...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.