如何交换上点击的形象？ [英] how to swap image on click?
本文介绍了如何交换上点击的形象？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我Wnt信号交换上点击图像，BT在这里如果从下图像M击到了，但它再次不下来的图像上，如果上的图片...
M米点击歌厅一些无差错的
$（文件）。就绪（函数（）{
$（'＃sortdivlink'）。点击（函数（）{
变种X = $（IMG [SRC $ ='.. /图像/ Sort_down.png'] [名称= stCodeDSC']）;
如果（x.attr（SRC）==../Images/Sort_down.png）{
x.attr（'src'中， 。x.attr（SRC）取代（../图像/ Sort_down.png，../Images/sort_up.png））;
}
，否则{
x.attr（'src'中，x.attr（SRC）取代（../图像/ sort_up.png，../Images/Sort_down.png））;
}
}）;
}）;
解决方案
您可以使用< ; DIV> 使用CSS类与背景图片和尺寸，并使用$（DIV）.toggleClass（新形象）使用更新的背景图片
这将大大简化你的代码。
< HTML和GT;
< HEAD>
<脚本SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js类型=文/ JavaScript的>< / SCRIPT>
<风格>
。首先，图像
{
背景图像：网址（'http://www.google.com/press/zeitgeist2001/google_logo.gif'）;
宽度：218px;
高度：90像素;
背景位置：中心;
背景重复：不重复;
}
。第二图像
{
背景图像：网址（'http://www.google.com/doodle4google/2008/images/regional_doodles /CO-80106-16a267f8-3.jpg'）;
宽度：350像素;
高度：224px;
背景位置：中心;
背景重复：不重复;
}
< /风格>
<脚本>
$（文件）。就绪（函数（）
{
$（＃目标的div）。点击（函数（）
{
$（ ＃目标格）toggleClass（第二图像）;
}）;
}）;
< / SCRIPT>
< /头>
<身体GT;
< DIV ID =目标格级=第一形象>< / DIV>
< /身体GT;
< / HTML>
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
$(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"));
}
});
});
解决方案
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
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>
这篇关于如何交换上点击的形象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
