-2

我有四个 DIV，依次为 A、B、C 和 D，每个 DIV 都有一个向上/向下按钮。当它被点击时，DIV 应该替换位置。例如，如果单击 B DIV 中的向上，则顺序应为 B、A、C 和 D。

4

3 回答 3

1

我的假设可以帮助你，

HTML

<div id="container">
    <div id="a" class="cont"> A </div>
    <div id="b" class="cont"> B </div>
    <div id="c" class="cont"> C </div>
    <div id="c" class="cont"> D </div>  
</div>

脚本

$(function(){
    $(document).on('click','.cont',function(){
        $clone=$(this).clone();
        $(this).remove();
        $('#container').prepend($clone);
    });
});

小提琴和小提琴与一些动画

于 2013-10-10T07:27:04.890 回答
0

尝试这样的事情，小提琴

CSS

    .myDiv{
        clear: both;
        border: 1px solid #000;
        height: 100px;
        width: 100px;
        margin-bottom: 5px;
        margin-left: 20px;
    }

代码

<body>
    <div class="myDiv">
        A
        <button type="button" class="up">UP</button>
        <button type="button" class="down">DOWN</button>
    </div>
    <div class="myDiv">
        B
        <button type="button" class="up">UP</button>
        <button type="button" class="down">DOWN</button>
    </div>
    <div class="myDiv">
        C
        <button type="button" class="up">UP</button>
        <button type="button" class="down">DOWN</button>
    </div>
    <div class="myDiv">
        D
        <button type="button" class="up">UP</button>
        <button type="button" class="down">DOWN</button>
    </div>
</body>

JAVASCRIPT

 $(function(){
        $('.up').click(function(){
            var div = $(this).parent();
            if(div.prev().length){
                $(div.prev() ).before(div);
            }
        })
        $('.down').click(function(){
                var div = $(this).parent();
                if(div.next().length){
                    $(div.next()).after(div);
                }
        })
    })
于 2013-10-10T07:27:12.470 回答
0

工作部分向上/向下完整代码在这里带有向上和向下按钮或现场演示（jsFiddle）

html代码：

<div class="section a">
    <a class="up">UP</a>
    <a class="down">Down</a>  
</div>
<div class="section b">
    <a class="up">UP</a>
    <a class="down">Down</a>  
</div>
<div class="section c">
    <a class="up">UP</a>
    <a class="down">Down</a>  
</div>
<div class="section d">
    <a class="up">UP</a>
    <a class="down">Down</a>  
</div>

CSS代码：

.section{width:500px; color:#fff; font-family:arial; margin-bottom:10px; text-align:center; font-size:30px;}
.a{background-color:#09F; height:50px; line-height:50px;}
.b{background-color:#333; height:100px; line-height:100px;}
.c{background-color:#9C3; height:150px; line-height:150px;}
.d{background-color:#F93; height:200px; line-height:200px;}

a{display:inline-block; margin: 0 10px; text-decoration:underline; cursor:pointer;}
a:hover{text-decoration:none;}

jQuery代码：

jQuery(document).ready(function($){

  $(".section a").click(function(e){
       var eSection = $(this).parent('.section');
      if($(e.target).is('.up') && eSection.prev('.section').length) {
          eSection.prev('.section').insertAfter(eSection);
      }

      if($(e.target).is('.down') && eSection.next('.section').length) {
          eSection.next('.section').insertBefore(eSection);
      }

  });

});
于 2013-10-10T08:41:43.943 回答