Disable a button in the first child div

问题

I've tried to create a simple application to swap divs on clicking the respective buttons.

However, the first div which is the first-child of div.container should have 'left' and 'top' button disabled.

I've tried to achieve this by finding the first child and changing the property of the button inside it to disabled. But this is lost and is not retained on the new first child when I swap the first-child.

Here's the code.

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

            }

            .disabled-btn {
                cursor: not-allowed;
                opacity: 0.25%;
            }

        </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="left">Swap with left!</button>
                <button class="top">Swap with top!</button>
                <button class="down">Swap with down!</button>
            </div>

            <div class="box" id="two">
                <p>two</p>
                <button class="right">Swap with right!</button>
                <button class="left">Swap with left!</button>
                <button class="top">Swap with top!</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="left">Swap with left!</button>
                <button class="top">Swap with top!</button>
                <button class="down">Swap with down!</button>

            </div>

            <div class="box" id="four">
                <p>four</p>
                <button class="right">Swap with right!</button>
                <button class="left">Swap with left!</button>
                <button class="top">Swap with top!</button>
                <button class="down">Swap with down!</button>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                resetEvents();
            }

                function resertEvents() {

                    $('.right').unbind('click');
                    $('.left').unbind('click');
                    $('.top').unbind('click');
                    $('.down').unbind('click');


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

                    $('.down').click(function(){
                        //alert('ok');
                        var toMove1 = $(this).parents('.box');
                        var middle = $(toMove1).next();
                        var toMove2 = $(middle).next();

                        toMove2 = $(toMove1).insertAfter($(middle).next());

                        var middle = $(toMove2).prev();
                        //alert(middle);
                        middle = $(middle).insertBefore($(middle).prev());

                        //toMove2 = toMove1.prev();

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

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

                        toMove2 = $(toMove1).insertBefore($(middle).prev());

                        var middle = $(toMove2).next();
                        //alert(middle);
                        middle = $(middle).insertAfter($(middle).next());

                        //toMove2 = toMove1.prev();

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

                }





            var firstChild = $('.container').children().first();
            var lastChild = $('.container').children().last();
            resetChild(firstChild, lastChild);


            });

            function resetChild(first, last) {
                var firstChild = $('.container').children().first();
                //console.log(firstChild);
                if(firstChild){
                    //$(firstChild).find('.left').prop('disabled', true);
                    $(firstChild).find('.left').addClass(disabled-btn);
                }

                var lastChild = $('.container').children().last();
                if(lastChild){
                    $(lastChild).find('.right').prop('disabled', true);
                }
            }
        </script>
    </body>
</html>

Added fiddle.

回答1:

So, I went through your logic and modified and changed some aspect of your code for the better. The attached code is an improved version of what you have posted.

I created a function handleEvents() which should handle all your disable button properties on resetting of the layout and when two divs are swapped. This method has to be basically called on the swapping of all divs to render the new disabled properties on the buttons.

The function looks like this:

  function handleEvents() {
    $(".top, .left, .down, .right").prop("disabled", false);

    $(".container .box:first-child").find(".top, .left").prop("disabled", true);
    $(".container .box:nth-child(2)").find(".top, .right").prop("disabled", true);
    $(".container .box:nth-child(3)").find(".down, .left").prop("disabled", true);
    $(".container .box:nth-child(4)").find(".down, .right").prop("disabled", true);
  }

Check updated solution in this fiddle.

Refer the working solution here:

$(document).ready(function() {
  resetEvents();

  function handleEvents() {
    $(".top, .left, .down, .right").prop("disabled", false);

    $(".container .box:first-child").find(".top, .left").prop("disabled", true);
    $(".container .box:nth-child(2)").find(".top, .right").prop("disabled", true);
    $(".container .box:nth-child(3)").find(".down, .left").prop("disabled", true);
    $(".container .box:nth-child(4)").find(".down, .right").prop("disabled", true);
  }


  function resetEvents() {

    $(".top, .left, .down, .right").unbind('click');

    handleEvents();

    $('.right').click(function() {
      var toMove1 = $(this).parents('.box');

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

    $('.left').click(function() {
      var toMove1 = $(this).parents('.box');

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

    $('.down').click(function() {
      var toMove1 = $(this).parents('.box');
      var middle = $(toMove1).next();
      var toMove2 = $(middle).next();

      toMove2 = $(toMove1).insertAfter($(middle).next());

      var middle = $(toMove2).prev();
      middle = $(middle).insertBefore($(middle).prev());
      handleEvents();
    });

    $('.top').click(function() {
      var toMove1 = $(this).parents('.box');
      var middle = $(toMove1).prev();
      var toMove2 = $(middle).prev();

      toMove2 = $(toMove1).insertBefore($(middle).prev());

      var middle = $(toMove2).next();
      middle = $(middle).insertAfter($(middle).next());
      handleEvents();
    });
  }
});

.box {
  height: 25%;
  width: 45%;
  padding: 1%;
  margin-left: 1%;
  margin-top: 1%;
  border: 1px solid black;
  float: left;
}

.disabled-btn {
  cursor: not-allowed;
  opacity: 0.25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>

<body>
  <div class="container">
    <div class="box" id="one">
      <p>one</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>
    </div>

    <div class="box" id="two">
      <p>two</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</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="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>

    </div>

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

</body>

回答2:

First we will configure all buttons as per your requirements.

(top left), disable top and left
(top right), disable top and right
(bottom left), disable down and left
(bottom right), disable down and right

full jsfiddle here

Code

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

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

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

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

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

For swapping, we will play with array-index of the boxes and swap the html content of each box.

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

For example, right button will swap current box and the one next to it (on its right).

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

来源：https://stackoverflow.com/questions/43043244/disable-a-button-in-the-first-child-div

标签

jquery

html

css

parent-child