Question

我希望在点击它们时实现切换2个HTML分区的位置的效果。

因此，点击后，顶部将移至底部，底部将移至顶部。

以下是我可以提出的内容

<html>
<head>
  <script type="text/javascript">
$(document).ready(
    function(){
        $('div').click(
            function(){
                $(this).insertBefore($(this).next());
            }
        );
        }
        )
  </script>

  <style type="text/css">
  body{
    margin: 0;
   }
    #top{
height: 100px; 
width: 100px;
background: rgb(206,206,203);
    }

    #bottom{
        height: 100px;
        width: 100px; 
background: rgb(226,206,203);
     }
  </style>

</head>
<body>
        <div id="top"></div>
        <div id="bottom"></div>
</body>
</html>

我知道有一种方法可以在Jquery选择器中使用类来选择特定的Element，如下所示

  <script type="text/javascript">
$(document).ready(
    function(){
        $('div').click(
            function(){
                **$('#bottom').insertBefore('#top');**
            }
        );
        }
        )
  </script>

但我只是想要一种通用的方法来移动具有任意名称和类名的元素。

提前致谢。

Answer 1

我建议使用一个唯一的类来关联每一对，然后你可以做类似的事情：

$('.pair').click( function() {
    $('.pair:first').insertAfter( $('.pair:not(:first)') );
});

通过JQUERY切换元素位置

1 个答案: