Question

我是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>

单击第2张和第3张图像时，没有任何反应。我到底做错了什么？有更简单的方法吗？我一直把头发拉到各处寻找，但似乎无法找到答案。非常感谢您提供给我的任何反馈......

Answer 1

为什么不简单？的 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 ); }); });

我的意思是，如果第一张图片代表当前频道 ，那么您需要做的就是预先添加点击的元素。要设置第一个元素的样式，只需使用CSS img:first-child

编辑：保留订单

<强> jsBin demo with Order

如果追加在某个时刻创建了一堆乱七八糟的频道，我建议你：

创建MAIN或当前正在观看大图片并将所有频道放置在父级内：

<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>

比在频道点击上，将点击的图像src设置为BIG图像，并隐藏点击的图像：

$(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

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

1 个答案: