Расположение переключающего элемента через JQUERY - PullRequest
1 голос
/ 12 мая 2010

Я хотел добиться эффекта переключения позиции двух делений 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, следующим образом

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

Но я просто хотел универсальный способ сдвигать элементы с произвольными именами и именами классов.

Заранее спасибо.

1 Ответ

1 голос
/ 12 мая 2010

Я бы предложил использовать уникальный класс, чтобы связать каждую пару, тогда вы можете сделать что-то вроде:

$('.pair').click( function() {
    $('.pair:first').insertAfter( $('.pair:not(:first)') );
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...