Removing code duplication when I use .hover in Jquery

Question

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!

Rashid 'Lee' Ibrahim · Accepted Answer · 2018-05-18 13:51:04Z

1

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++;
}

edited May 18, 2018 at 13:51

answered May 18, 2018 at 13:29

Rashid 'Lee' Ibrahim

1,3921 gold badge9 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Play38 Over a year ago

there's some problems with your code, but after some minor changes it works like a charm, thanks a lot!

Rashid 'Lee' Ibrahim Over a year ago

Sorry yea I just noticed a typo with the closing stuff.. Did this all on the fly in here and didn't check it in an editor

Play38 Over a year ago

Yeah, you've also mistyped bgColorElement instead of bgColor but that's alright

Rashid 'Lee' Ibrahim Over a year ago

Good looking out. I edited it so anyone in the future won't be confused

Collectives™ on Stack Overflow

Removing code duplication when I use .hover in Jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related