gpt4 book ai didi

javascript - 如何使用jquery交换多个图像的点击位置

转载 作者:行者123 更新时间:2023-11-28 00:25:29 29 4
gpt4 key购买 nike

我是 jquery/javascript 的新手,所以如果这是一个愚蠢的问题,请提前道歉。

我有 3 个图像,我希望能够在用户单击第二个或第三个图像时更改它们的位置。例如,如果用户单击图像#2,我希望图像#2 变为图像#1(最左边),然后图像#3 变为图像#2(中间),最后图像#1 变为图像#3(右)最多)。如果用户单击图像#3,我希望图像#3 变成图像#1(最左边),然后图像#1 变成图像#2(中间),最后图像#2 变成图像#3(最右边)。

如果用户单击第一张图像,我不希望发生任何事情。

这是我的代码:

<!DOCTYPE html>
<html>
<head>
<title>ImageSwap</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var img = new Array("http://i.imgur.com/QWso5yB.png", "http://i.imgur.com/O4X3egC.png", "http://i.imgur.com/w3p2qLp.png");
$('#first').bind('click', firstChannel);
$('#second').bind('click', secondChannel);
});
function firstChannel() {
var tempImg = img[0];
img[1] = img[2];
img[2] = tempImg;
$('#home').attr('src',img[0]);
$('#first').attr('src',img[1]);
$('#second').attr('src',img[2]);
};
function secondChannel() {
var tempImg = img[0];
img[0] = img[2];
img[2] = img[1];
img[1] = tempImg;
$('#home').attr('src',img[0]);
$('#first').attr('src',img[1]);
$('#second').attr('src',img[2]);
};
</script>
</head>
<body>
<img id="home" src="http://i.imgur.com/QWso5yB.png">
<img id="first" src="http://i.imgur.com/O4X3egC.png">
<img id="second" src="http://i.imgur.com/w3p2qLp.png">
</body>
</html>

单击第二张和第三张图像时,没有任何反应。我到底做错了什么?有没有更简单的方法来做到这一点?我绞尽脑汁到处寻找,但似乎找不到答案。非常感谢您给我的任何反馈...

最佳答案

为什么不简单一点呢? jsBin demo

父元素:

    <div id="channels">
<img src="http://i.imgur.com/QWso5yB.png">
<img src="http://i.imgur.com/O4X3egC.png">
<img src="http://i.imgur.com/w3p2qLp.png">
</div>

还有一些prepend():

    $(function () {
var $chn = $("#channels");
$chn.on("click","img", function(){
$chn.prepend( this );
});
});

我的意思是,如果第一个图像代表当前 channel ,那么您需要做的就是(如上所述)添加点击的元素强>。要设置第一个元素的样式,只需使用 CSS img:first-child

<小时/>

编辑:保持订单

jsBin demo with Order

如果追加在某个时刻造成 channel 顺序困惑,
我建议您:

创建一个主图像或当前正在观看大图像并将所有 channel 放入父级图像中:

    <img id="current">


<div id="channels">
<img src="//placehold.it/90x40/a7b&text=1">
<img src="//placehold.it/90x40/ba7&text=2">
<img src="//placehold.it/90x40/7ba&text=3">
<img src="//placehold.it/90x40/bb7&text=4">
<img src="//placehold.it/90x40/77a&text=5">
<img src="//placehold.it/90x40/ab7&text=6">
</div>

与 channel 点击相比,将点击的图像 src 设置为大图像,并隐藏点击的图像:

$(function () {

var $img = $("#channels").find("img");
var $current = $("#current"); // The big image

$img.on("click", function(){
$current[0].src = this.src;
$img.show();
$(this).hide();
}).eq(0).click();

});

Example with a better UI

关于javascript - 如何使用jquery交换多个图像的点击位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29551883/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com