CODEWITHSUNDEEP
jquery
Play38
Play38

Reputation: 127

Removing code duplication when I use .hover in Jquery

I want to ask if there's a way to remove the duplication of the code I have right now when I use .hover in first4boxes function and in createBox function.

And if it's possible to make a custom function of changing colors and calling it both if first4boxes and in createBox.

$(document).ready(function() {
  var originColor;
  var originOpacity;
  var upperBox = $(".right_side_lay3 div")
  var boxCount = 1;
  var firstCheck = 1;
  //colorChange(originColor, originOpacity, upperBox);
  createBox(boxCount, firstCheck, originColor, originOpacity);
})

$(document).ready(function first4boxes() {
  var firstboxes = 0;
  while (firstboxes < 4) {
    $(".right_side_lay3").append("<div></div>").find("div:last").css("opacity", Math.random()).hover(function() {
      originColor = $(this).css("background-color");
      originOpacity = $(this).css("opacity");
      $(this).css({ "background-color": "#ffffff", "opacity": "1" });
    }, function() {
      $(this).css({ "background-color": originColor, "opacity": originOpacity });
    });
    firstboxes++;
  }
})

function createBox(boxCount, firstCheck, originColor, originOpacity) {
  $(".button").on("click", function() {
    if ((boxCount % 5) == 0) {
      if (firstCheck == 1) {
        firstCheck = 0;
      } else {
        $(".main_lay3").css("height", "+=250");
      }
      boxCount = 1;
    }
    $(".main_lay3").append("<div></div>").find("div:last").css("opacity", Math.random()).hover(function() {
      originColor = $(this).css("background-color");
      originOpacity = $(this).css("opacity");
      $(this).css({ "background-color": "#ffffff", "opacity": "1" });
    }, function() {
      $(this).css({ "background-color": originColor, "opacity": originOpacity });
    });
    boxCount++;
  });
}

Thanks for anyone who's willing to help!

Upvotes: 0

Views: 50

Answers (1)

Rashid &#39;Lee&#39; Ibrahim
Rashid &#39;Lee&#39; Ibrahim

Reputation: 1392

So just make it a stand alone function that you call inside of the other functions.

function bgColor(element) {
    return $(element).append("<div> 
        </div>").find("div:last").css("opacity", Math.random()).hover(function() {
        originColor = $(this).css("background-color");
        originOpacity = $(this).css("opacity");
        $(this).css({ "background-color": "#ffffff", "opacity": "1" });
    }, function() {
        $(this).css({ "background-color": originColor, "opacity": originOpacity });
    }
};

And in your existing code. For createbox

function createBox(boxCount, firstCheck, originColor, originOpacity) {
    $(".button").on("click", function() {
        if ((boxCount % 5) == 0) {
           if (firstCheck == 1) {
               firstCheck = 0;
           } else {
               $(".main_lay3").css("height", "+=250");
           }
           boxCount = 1;
        }
        bgColor(".main_lay3")
    });
}

In first4boxes change the while loop to only call the function.

while (firstboxes < 4) {
    bgColor(".right_side_lay3")
    firstboxes++;
}

Upvotes: 1

Related Questions