javascript - Two clicks - different actions (same div) -
hope help! have divs (using bootstrap) like:
<div class="container"> <div class="row" id="r2"> <div class="col-lg-8"> <div class="block-in-div"></div> </div> <div class="col-lg-4"> <div class="col-lg-12"> <div class="block-in-div"></div> </div> <div class="row"> <div class="col-lg-12"> <div class="col-lg-4"> <div class="row"> <div class="col-lg-12"> <div class="block-in-div"></div> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="block-in-div"></div> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="block-in-div"></div> </div> </div> </div> <div class="col-lg-8"> <div class="block-in-div"></div> </div> </div> </div> </div> </div> </div>
when click on div should randomly background color. when click on div, previous should reset background, , newly clicked div should random background. whith issues clear.
i can`t how next: clicked on div, changes colour, click again , should become bigger.
color randomizer:
function getrandomcolor() { var r=math.floor(math.random() * (256)); var g=math.floor(math.random() * (256)); var b=math.floor(math.random() * (256)); var color = '#' + r.tostring(16) + g.tostring(16) + b.tostring(16); return color;};
reset background:
function cancelbg() { let selectedblocks = $("div.block-in-div"); $.each(selectedblocks,function(key,value){ selectedblocks[key].style.background = "none"; });};
main function:
$(document).ready(function () { $(".block-in-div").click(function () { cancelbg(); $(this).css("background", getrandomcolor()); });});
trying smth like:
$(document).ready(function () { $(".block-in-div").click(function () { var state = 1; return function () { cancelbg(); if(state===1){ $(this).css("background", getrandomcolor()); state=2; } else if(state===2){ /*$(this).addclass("active");*/ state=1; } }; }());});
.active test , simply:
.active{ height: 100vh; width: 100vw; }
please help! force you! :)
you can achieve adding class when div clicked first.
$(document).ready(function () { $(".block-in-div").click(function () { return function () { cancelbg(); if(!$(this).hasclass('not-resized')) { $(this).css("background", getrandomcolor()); $(this).addclass('not-resized'); } else if ($(this).hasclass('not-resized')) { $(this).addclass("active"); $(this).removeclass('not-resized'); } }; }()); });
if need reset state on click on other div can add $(".block-in-div").removeclass('not-resized'); @ end.
note 1: adding active class did have lower priority size on original class (add !important temporal fix see changes or better... make stronger selector).
note 2: if didn't requirements right pls. tell me.
Comments
Post a Comment