Disable A Button In The First Child Div

August 31, 2022 Post a Comment

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 '

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

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

Html5 Code Review

Disable A Button In The First Child Div

Solution 1:

Solution 2:

Post a Comment for "Disable A Button In The First Child Div"