Question

我有几个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>

例如，当我在div中右键单击Swap时，它应该在视觉上和div中交换div 1和div 2，它应该更改为 -

<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中的任何一个进行交换？

Answer 1

基本上，使用insertBefore / After不会交换 div，而是移动它们，这可以通过使用当前方法来证明

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

要让左上角的div与下面的div交换，你可以展开它并使用

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

但这只会让一个人感到兴奋。到了div＆＃39;三的地方。然后div＆＃39;两个＆＃39;将落入div的插槽，以及＆＃39; 3＆＃39;进入＆＃39;两个人。

然而，一旦div被移动了接下来会发生什么？例如，如果您一直点击＆＃39;交换正确＆＃39;它应该与下方和左侧的div交换，是否应该将按钮重新标记为“与左侧交换”？

我添加了四个位置div（使用＆＃39; parent＆＃39;类），因此您可以在DOM中移动所需的div，并在每个区域内使用标签等规则。我已经证明使用了topLeft＆＃39;，＆＃39; bottomRight＆＃39;等等，但你可以有一个包含许多不同位置的数组，并根据需要使用索引。

下面的代码可以重构，以有选择地更新事件处理程序，更改标签和减少代码，但是为了便于查看发生了什么，我已经将它留下了相当冗长。

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

Answer 2

看来你已经为这个问题创建了多个问题:) 我回答了您之前的question here。

jsfiddle here

<强>代码

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

对于交换，我们将使用框的数组索引并交换每个框的html内容。

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

Answer 3

好的，我已经将这个用于交换左侧＆amp; amp;正确的divs。现在，坚持上下！

这是我的更新代码。

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

此外，如果交换div，我如何确保按钮交换权限更改为左侧交换，如果它是正确的元素，并且相应地更改每个按钮？

在DOM中交换div并使用jquery在视觉上单击

3 个答案: