在我想要交换位置的众多图像中,我有两个图像。如果我单击一个图像,然后单击另一个图像,则相应的图像应相互交换,其余图像应保持不变。我是这方面的初学者,所以任何帮助或指导都会有所帮助。
问问题
194 次
6 回答
2
这也适用于每个图像:
<img src="http://stunningwebsitetemplates.files.wordpress.com/2011/12/jquery.png"/>
<img src="http://bloggerschmidt.de/images/stories/logo-mootools.gif" />
<img src="http://stunningwebsitetemplates.files.wordpress.com/2011/12/jquery.png"/>
<img src="http://bloggerschmidt.de/images/stories/logo-mootools.gif" />
JS
$(function(){
var src="";
var old;
$("img").click(function(){
if(src=="")
{
src=$(this).attr("src");
old=$(this);
}
else
{
old.attr("src",$(this).attr("src"));
$(this).attr("src",src);
src="";
}
});
});
于 2012-08-08T10:14:09.140 回答
1
另一种没有任何全局变量的解决方案。
html
<div id="images">
<img scr="/images/1.jpg" />
<img scr="/images/2.jpg" />
<img scr="/images/3.jpg" />
<img scr="/images/4.jpg" />
<img scr="/images/5.jpg" />
</div>
js文件
$('img').click(function(){
if($('#images img').hasClass('selected')){
var src = $(this).attr('src');
$('.selected').attr('src',src);
$(this).attr('src',$('.selected').attr('src'));
$(this).removeClass('selected');
}
else
$(this).addClass('selected');
});
于 2012-08-08T10:41:03.790 回答
0
试试下面的代码
html
<div>
<img scr="/images/1.jpg" />
<img scr="/images/2.jpg" />
<img scr="/images/3.jpg" />
<img scr="/images/4.jpg" />
<img scr="/images/5.jpg" />
</div>
js文件
(function() {
var swapArray = [];
var count=0;
$('img').click(function(){
count++;
swapArray.push($(this).attr('src'));
$(this).addClass(count);
if(count==2){
$('.1').attr('src',swapArray[1]).removeClass('1');
$('.2').attr('src',swapArray[0]).removeClass('2');
swapArray.length = 0;
count=0;
}
});
}());
于 2012-08-08T10:11:40.980 回答
0
请参阅以下示例:http: //jsfiddle.net/Lvp4j/1/
var selected;
$("img").click(
function() {
if (!selected)
{
selected = this;
$(selected).addClass("selected");
}
else
{
var src1 = $(selected).attr("src");
var src2 = $(this).attr("src");
$(this).attr("src", src1);
$(selected).attr("src", src2);
$(selected).removeClass("selected");
selected = null;
}
}
);
我的代码还添加了一个selected
类,因此您可以突出显示单击的图像...
于 2012-08-08T10:15:47.823 回答
0
这是一种不同的方法,它交换实际元素而不是 img 的 src,也避免使用外部变量进行交换。
$('img.swap').on('click', function() {
var t = $(this);
if (t.hasClass('clicked')) {
t.removeClass('clicked');
return;
}
var clicked = $('img.swap.clicked')
if (clicked.length === 0) {
t.addClass('clicked');
return;
}
var placeHolder = $('<div id="placeholder"></div>');
clicked.before(placeHolder);
t.after(clicked);
placeHolder.before(t).remove();
clicked.removeClass('clicked');
});
示例 - http://jsfiddle.net/BxST9/3/(使用 div 而不是 img 但不应该有所作为)
于 2012-08-08T10:23:41.983 回答
0
鉴于此 HTML:
<img src="image_1.jpg" />
<img src="image_2.jpg" />
<img src="image_3.jpg" />
<img src="image_4.jpg" />
您可以使用以下 JavaScript:
(function() {
var previous = null;
$('img').click(function() {
var current = $(this);
if (current.is(previous)) { // clicked same image twice; reset
reset_clicked();
} else if (previous != null) { // two images clicked; swap
swap_src(previous, current);
reset_clicked();
} else {
set_clicked(current);
}
});
function reset_clicked() {
previous.removeClass('clicked');
previous = null;
}
function set_clicked(img) {
img.addClass('clicked');
previous = img;
}
function swap_src(img1, img2) {
var src1 = img1.attr('src');
img1.attr('src', img2.attr('src'));
img2.attr('src', src1);
}
}());
该类'clicked'
是纯粹添加的,因此您可以使用 CSS 来设置单击图像的样式。此类也可用于识别任何先前单击的图像,但我使用了 JavaScript 变量,因为它比 DOM 查找更快。
JSFiddle上有一个演示:jsfiddle.net/cvthL/2
此答案作为Jitendra Pancholi 的第一个答案的改进版本和他/她的第二个答案的替代品发布。
于 2012-08-08T11:00:36.663 回答