Question

我尝试制作图像堆栈库：只要单击顶部图像，它就会移动到图像堆栈的底部，而其他每个图像都会向上移动一个位置。

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

通过使用replaceWith（）
通过使用attr（），reOrder（）和append（）

如果有什么不清楚的地方，请询问。非常感谢任何帮助！

到目前为止，这是我的代码......

HTML：

<div id="content">
  <article id="c1"><img src="01.jpg" alt="" /></article>
  <article id="c2"><img src="02.jpg" alt="" /></article>
  <article id="c3"><img src="03.jpg" alt="" /></article>
  <article id="c4"><img src="04.jpg" alt="" /></article>
  <article id="c5"><img src="05.jpg" alt="" /></article>
  <article id="c6"><img src="06.jpg" alt="" /></article>
  <article id="c7"><img src="07.jpg" alt="" /></article>
  <article id="c8"><img src="08.jpg" alt="" /></article>
  <article id="c9"><img src="09.jpg" alt="" /></article>
  <article id="c10"><img src="10.jpg" alt="" /></article>
</div>

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

JS（试训）：

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

Answer 1

这应该有效：

$(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;
    });

});

您可以在jsfiddle.net/marke/Adc3K/看到它的实际效果。请注意，为了测试目的，我用数字替换了图像。

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

1 个答案: