Javascript 在DOM中交换div并使用jquery可视化地单击_Javascript_Jquery_Html_Dom

Javascript 在DOM中交换div并使用jquery可视化地单击

javascript jquery html dom

Javascript 在DOM中交换div并使用jquery可视化地单击,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我有几个div需要在单击相应的按钮时交换 <html> <head> <style> .box { height: 25%; width: 45%; padding: 1%; margin-left: 1%; margin-top: 1%;

我有几个div需要在单击相应的按钮时交换

<html>
    <head>
        <style>
            .box {
                height: 25%;
                width: 45%;
                padding: 1%;
                margin-left: 1%;    
                margin-top: 1%;
                border: 1px solid black;
                float: left;

            }

        </style>
        <script src="css/jquery-3.2.0.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="box" id="one">
                <p>one</p>
                <button onclick="moveMe_right()">Swap with right!</button>
                <button onclick="moveMe_down()">Swap with down!</button>
            </div>

            <div class="box" id="two">
                <p>two</p>
                <button onclick="moveMe_left()">Swap with left!</button>
                <button onclick="moveMe_down()">Swap with down!</button>
            </div>

            <div class="box" id="three">
                <p>three</p>
                <button onclick="moveMe_right()">Swap with right!</button>
                <button onclick="moveMe_top()">Swap with top!</button>

            </div>

            <div class="box" id="four">
                <p>four</p>
                <button onclick="moveMe_left()">Swap with left!</button>
                <button onclick="moveMe_down()">Swap with down!</button>
            </div>

        </div>
    </body>
</html>


.盒子{
身高：25%；
宽度：45%；
填充：1%；
左缘：1%；
利润率最高：1%；
边框：1px纯黑；
浮动：左；
}
一个
用右手交换！
换成羽绒服！
两个
与左交换！
换成羽绒服！
三
用右手交换！
交换与顶部！
四
与左交换！
换成羽绒服！

例如，当我在divone中单击Swap with right时，它应该在视觉上交换divone和div2，并且应该在DOM中交换-

<div class="container">
                <div class="box" id="two">
                    <p>two</p>
                    <button onclick="moveMe_right()">Swap with right!</button>
                    <button onclick="moveMe_down()">Swap with down!</button>
                </div>

                <div class="box" id="one">
                    <p>one</p>
                    <button onclick="moveMe_left()">Swap with left!</button>
                    <button onclick="moveMe_down()">Swap with down!</button>
                </div>

                <div class="box" id="three">
                    <p>three</p>
                    <button onclick="moveMe_right()">Swap with right!</button>
                    <button onclick="moveMe_top()">Swap with top!</button>

                </div>

                <div class="box" id="four">
                    <p>four</p>
                    <button onclick="moveMe_left()">Swap with left!</button>
                    <button onclick="moveMe_down()">Swap with down!</button>
                </div>

            </div>


两个
用右手交换！
换成羽绒服！
一个
与左交换！
换成羽绒服！
三
用右手交换！
交换与顶部！
四
与左交换！
换成羽绒服！

同样地，我怎样才能在交换左、上、下div时达到同样的效果呢？

好的，我已经为交换左、右div做好了准备。现在，坚持自上而下

这是我的更新代码

<html>
    <head>
        <style>
            .box {
                height: 25%;
                width: 45%;
                padding: 1%;
                margin-left: 1%;    
                margin-top: 1%;
                border: 1px solid black;
                float: left;

            }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="box" id="one">
                <p>one</p>
                <button class="right">Swap with right!</button>
                <button class="down">Swap with down!</button>
            </div>

            <div class="box" id="two">
                <p>two</p>
                <button class="left">Swap with left!</button>
                <button class="down">Swap with down!</button>
            </div>

            <div class="box" id="three">
                <p>three</p>
                <button class="right">Swap with right!</button>
                <button class="top">Swap with top!</button>

            </div>

            <div class="box" id="four">
                <p>four</p>
                <button class="left">Swap with left!</button>
                <button class="down">Swap with down!</button>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                $('.right').click(function(){
                    //alert('ok');
                    var toMove1 = $(this).parents('.box');
                    //toMove2 = toMove1.next();

                    $(toMove1).insertAfter($(toMove1).next());
                });

                $('.left').click(function(){
                    //alert('ok');
                    var toMove1 = $(this).parents('.box');
                    //toMove2 = toMove1.prev();

                    $(toMove1).insertBefore($(toMove1).prev());
                });

                $('.container').eq(0);
                /*
                $('.down').click(function(){
                    //alert('ok');
                    toMove1 = $(this).parents('.box');
                    //toMove2 = toMove1.prev();

                    var toMove2 = $(toMove1).insertAfter($(toMove1).next());
                    $(toMove2).insertAfter($(toMove2).next());
                });

                $('.top').click(function(){
                    //alert('ok');
                    toMove1 = $(this).parents('.box');
                    //toMove2 = toMove1.prev();

                    $(toMove1).insertAfter($(toMove1).prev());
                });



                $(".box").first().css({"background-color":"yellow"});

                $('.box:first-child').eq(3).removeClass('.left');
                $('.box:first-child').eq(3).addClass('.right');
                */
            });
        </script>
    </body>
</html>


.盒子{
身高：25%；
宽度：45%；
填充：1%；
左缘：1%；
利润率最高：1%；
边框：1px纯黑；
浮动：左；
}
一个
用右手交换！
换成羽绒服！
两个
与左交换！
换成羽绒服！
三
用右手交换！
交换与顶部！
四
与左交换！
换成羽绒服！
$（文档）.ready（函数（）{
$（'.right'）。单击（函数（）{
//警报（“正常”）；
var toMove1=$（this.parents（'.box'）；
//toMove2=toMove1.next（）；
$（tomov1.insertAfter（$（tomov1.next（））；
});
$（'.left'）。单击（函数（）{
//警报（“正常”）；
var toMove1=$（this.parents（'.box'）；
//toMove2=toMove1.prev（）；
$（toMove1.insertBefore（$（toMove1.prev（））；
});
$（'.container'）.eq（0）；
/*
$（'.down'）。单击（函数（）{
//警报（“正常”）；
toMove1=$（this.parents（'.box'）；
//toMove2=toMove1.prev（）；
var toMove2=$（tomov1.insertAfter（$（tomov1.next（））；
$（toMove2.insertAfter（$（toMove2.next（））；
});
$（'.top'）。单击（函数（）{
//警报（“正常”）；
toMove1=$（this.parents（'.box'）；
//toMove2=toMove1.prev（）；
$（toMove1.insertAfter（$（toMove1.prev（））；
});
$（“.box”）.first（）.css（{“背景色”：“黄色”}）；
$（'.box:first child'）.eq（3）.removeClass（'.left'）；
$（'.box:first child'）.eq（3）.addClass（'.right'）；
*/
});

另外，我如何确保按钮swap with right更改为swap with left（如果它是右元素），并且类似地，在交换div时，每个按钮都会相应地更改？

好的，我已经将此用于交换左和右div。现在，坚持自上而下

这是我的更新代码

<html>
    <head>
        <style>
            .box {
                height: 25%;
                width: 45%;
                padding: 1%;
                margin-left: 1%;    
                margin-top: 1%;
                border: 1px solid black;
                float: left;

            }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="box" id="one">
                <p>one</p>
                <button class="right">Swap with right!</button>
                <button class="down">Swap with down!</button>
            </div>

            <div class="box" id="two">
                <p>two</p>
                <button class="left">Swap with left!</button>
                <button class="down">Swap with down!</button>
            </div>

            <div class="box" id="three">
                <p>three</p>
                <button class="right">Swap with right!</button>
                <button class="top">Swap with top!</button>

            </div>

            <div class="box" id="four">
                <p>four</p>
                <button class="left">Swap with left!</button>
                <button class="down">Swap with down!</button>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                $('.right').click(function(){
                    //alert('ok');
                    var toMove1 = $(this).parents('.box');
                    //toMove2 = toMove1.next();

                    $(toMove1).insertAfter($(toMove1).next());
                });

                $('.left').click(function(){
                    //alert('ok');
                    var toMove1 = $(this).parents('.box');
                    //toMove2 = toMove1.prev();

                    $(toMove1).insertBefore($(toMove1).prev());
                });

                $('.container').eq(0);
                /*
                $('.down').click(function(){
                    //alert('ok');
                    toMove1 = $(this).parents('.box');
                    //toMove2 = toMove1.prev();

                    var toMove2 = $(toMove1).insertAfter($(toMove1).next());
                    $(toMove2).insertAfter($(toMove2).next());
                });

                $('.top').click(function(){
                    //alert('ok');
                    toMove1 = $(this).parents('.box');
                    //toMove2 = toMove1.prev();

                    $(toMove1).insertAfter($(toMove1).prev());
                });



                $(".box").first().css({"background-color":"yellow"});

                $('.box:first-child').eq(3).removeClass('.left');
                $('.box:first-child').eq(3).addClass('.right');
                */
            });
        </script>
    </body>
</html>


.盒子{
身高：25%；
宽度：45%；
填充：1%；
左缘：1%；
利润率最高：1%；
边框：1px纯黑；
浮动：左；
}
一个
用右手交换！
换成羽绒服！
两个
与左交换！
换成羽绒服！
三
用右手交换！
交换与顶部！
四
与左交换！
换成羽绒服！
$（文档）.ready（函数（）{
$（'.right'）。单击（函数（）{
//警报（“正常”）；
var toMove1=$（this.parents（'.box'）；
//toMove2=toMove1.next（）；
$（tomov1.insertAfter（$（tomov1.next（））；
});
$（'.left'）。单击（函数（）{
//警报（“正常”）；
var toMove1=$（this.parents（'.box'）；
//toMove2=toMove1.prev（）；
$（toMove1.insertBefore（$（toMove1.prev（））；
});
$（'.container'）.eq（0）；
/*
$(toMove1).insertAfter($(toMove1).next().next());

<html>
<head>
    <style>
        .box {
            height: 25%;
            width: 45%;
            padding: 1%;
            margin-left: 1%;
            margin-top: 1%;
            border: 1px solid black;
            float: left;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="topLeft" class="parent">
            <div class="box" id="one">
                <p>one</p>
                <button class="right">Swap with right!</button>
                <button class="down">Swap with down!</button>
            </div>
        </div>
        <div id="topRight" class="parent">
            <div class="box" id="two">
                <p>two</p>
                <button class="left">Swap with left!</button>
                <button class="down">Swap with down!</button>
            </div>
        </div>
        <div id="bottomLeft" class="parent">
            <div class="box" id="three">
                <p>three</p>
                <button class="right">Swap with right!</button>
                <button class="top">Swap with top!</button>
            </div>
        </div>
        <div id="bottomRight" class="parent">
            <div class="box" id="four">
                <p>four</p>
                <button class="left">Swap with left!</button>
                <button class="top">Swap with top!</button>
            </div>
        </div>
    </div>
<script>
    $(document).ready(function () {
        // Set the event handlers on load...
        resetEvents();
    });

    function UpdateDivs(parent1, parent2, class1, class2) {
        var parent1Content = $('#' + parent1).children();
        var parent2Content = $('#' + parent2).children();

        $(parent1Content).find('.' + class1).each(function () {
            swapButtonClass(this);
        });

        $(parent2Content).find('.' + class2).each(function () {
            swapButtonClass(this);
        });

        $('#' + parent1).append(parent2Content);
        $('#' + parent2).append(parent1Content);

        resetEvents();
    }

    function resetEvents() {
        // Clear the current handlers - because the buttons will change their class.
        // The handlers are still attached to the buttons that were seen with that class initially.
        // This could be done selectively, but for demo purposes, just resets all of them when the DOM is changed.
        $('.right').unbind('click');
        $('.left').unbind('click');
        $('.top').unbind('click');
        $('.down').unbind('click');

        $('.right').click(function () {
            var parent1 = $(this).parents('.parent').attr('id');
            var parent2 = parent1.replace('Left', 'Right');

            UpdateDivs(parent1, parent2, 'right', 'left');
        });

        $('.left').click(function () {
            var parent1 = $(this).parents('.parent').attr('id');
            var parent2 = parent1.replace('Right', 'Left');

            UpdateDivs(parent1, parent2, 'left', 'right');
        });

        $('.down').click(function () {
            var parent1 = $(this).parents('.parent').attr('id');
            var parent2 = parent1.replace('top', 'bottom');

            UpdateDivs(parent1, parent2, 'down', 'top');
        });

        $('.top').click(function () {
            var parent1 = $(this).parents('.parent').attr('id');
            var parent2 = parent1.replace('bottom', 'top');

            UpdateDivs(parent1, parent2, 'top', 'down');
        });

        $('.container').eq(0);
    }

    function swapButtonClass(button) {
        // Swap class and labels when moving the divs around.
        switch (button.className) {
            case "right":
                $(button).removeClass('right').addClass('left').text($(button).text().replace('right', 'left'));
                break;
            case "left":
                $(button).removeClass('left').addClass('right').text($(button).text().replace('left', 'right'));
                break;
            case "top":
                $(button).removeClass('top').addClass('down').text($(button).text().replace('top', 'down'));
                break;
            case "down":
                $(button).removeClass('down').addClass('top').text($(button).text().replace('down', 'top'));
                break;
        }
    }
</script>
</body>
</html>

function resetButtons() {
  // enable and show all buttons
    $("button").prop("disabled", false).show();

  // First box (top left), disable and hide top and left
  var firstBox = $(".box").eq(0);
  firstBox.find(".top").prop("disabled", true).hide();
  firstBox.find(".left").prop("disabled", true).hide();

  // Second box (top right), disable and hide top and right
  var secondBox = $(".box").eq(1);
  secondBox.find(".top").prop("disabled", true).hide();
  secondBox.find(".right").prop("disabled", true).hide();

  // Third box (bottom left), disable and hide down and left
  var thirdBox = $(".box").eq(2);
  thirdBox.find(".down").prop("disabled", true).hide();
  thirdBox.find(".left").prop("disabled", true).hide();

  // Fourth box (bottom right), disable and hide down and right
  var fourthBox = $(".box").eq(3);
  fourthBox.find(".down").prop("disabled", true).hide();
  fourthBox.find(".right").prop("disabled", true).hide();
}

function swapContent(divA, divB) {
  var tempDiv = divA.html();
  divA.html(divB.html());
  divB.html(tempDiv);
}

$(".container").on("click", ".right", function(e) {
  var currentBox = $(this).parents('.box');
  var currentIndex = $(".box").index(currentBox);
  console.log(currentIndex, "right", currentBox);

  swapContent(
    currentBox,
    $(".box").eq(currentIndex+1)
  );

  resetButtons();
});