Jquery 通过更改图像容器的顺序，单击图像堆栈

我尝试创建一个图像堆栈库：只要单击顶部图像，它就会移动到图像堆栈的底部，并且每隔一个图像就会向上移动一个位置

到目前为止，我尝试了几件运气不佳的事情：

• 通过使用replaceWith（）交换文章的HTML
• 通过使用attr（）、reOrder（）和append（）更改项目的ID

如果有什么不清楚的，请询问。非常感谢您的帮助

这是我到目前为止的代码

HTML:

JS（试用期）：

$（函数（）{
$（'article#c1'）。单击（函数（）{
$（this）.替换为（$（'article#c2'）；
});
$（'article#c1'）。单击（函数（）{
$（'article#c1'）.attr（'id'，'c2'）；
$（'article#c2'）.attr（'id'，'c1'）；
});
$（'article#c1'）。单击（函数（）{
var order=$（'#order'）.val（）=''？null:$（'#order'）.val（）.split（“，”）；
$（#content'）。重新排序（order，'c'）；
$（“#内容”）.reOrder（）；
});
});
（函数（$）{
$.fn.reOrder=函数（数组，前缀）{
返回此值。每个（函数（）{
前缀=前缀| |“”；
if（数组）{
对于（var i=0；i

这应该可以：

$(function() {

    $('article#c1').live('click', function() {
        var articles = $('article');
        articles.each(function(i, el) {
            el.id = 'c' + (el.id.substring(1) - 1);
        });
        this.id = 'c' + articles.length;
    });

});

---

你可以看到它的行动在。请注意，出于测试目的，我将图像替换为数字。

这应该可以。。。运行时遇到的问题是，如果在JQuery中更改DOM，就会丢失绑定函数。live（）解决了这个问题。我尝试对脚本进行一些增强，以便文章的位置由jquery而不是css文件设置。位置和z索引正在工作，但现在点击部分不再工作。某个地方有缺失的链接吗？有什么想法吗？以下是我目前为止的代码：@user648519:我制作了一个新版本，它使用JavaScript而不是CSS设置位置。看见

div#content {
  position: relative;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
}

article {
  position: absolute;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

article#c1 {top: 0; left: 0; z-index: 1000;}
article#c2 {top: 20px; left: 20px; z-index: 999;}
article#c3 {top: 40px; left: 40px; z-index: 998;}
article#c4 {top: 60px; left: 60px; z-index: 997;}
article#c5 {top: 80px; left: 80px; z-index: 996;}
article#c6 {top: 100px; left: 100px; z-index: 995;}
article#c7 {top: 120px; left: 120px; z-index: 994;}
article#c8 {top: 140px; left: 140px; z-index: 993;}
article#c9 {top: 160px; left: 160px; z-index: 992;}
article#c10 {top: 180px; left: 180px; z-index: 991;}

$(function() {

  $('article#c1').click(function() {
    $(this).replaceWith($('article#c2'));
  });


  $('article#c1').click(function() {
    $('article#c1').attr('id','c2');
    $('article#c2').attr('id','c1');
  });


  $('article#c1').click(function() {
    var order = $('#order').val() == ""? null: $('#order').val().split(",");
    $('#content').reOrder(order, 'c');
    $('#content').reOrder();
  });

});

(function($) {

$.fn.reOrder = function(array, prefix) {
  return this.each(function() {
    prefix = prefix || "";

    if (array) {    
      for(var i=0; i < array.length; i++) 
        array[i] = $('#' + prefix + array[i]);

      $(this).empty();  

      for(var i=0; i < array.length; i++)
        $(this).append(array[i]);      
    }
  });    
}
})(jQuery);

$(function() {

    $('article#c1').live('click', function() {
        var articles = $('article');
        articles.each(function(i, el) {
            el.id = 'c' + (el.id.substring(1) - 1);
        });
        this.id = 'c' + articles.length;
    });

});