在jQuery中使用提示符（）更改网格设置

Question

在提示符中输入数字< 64后，可以以某种方式更改行数和平方数吗？我不想要改变“box_main”的大小。 所以基本上只改变.square和.row的比例并修改行和列。

的jQuery：

var rows = 16; 
 
var columns = 16; 
 
var $row = $("<div />", { 
 
    class: 'row' 
 
}); 
 
var $square = $("<div />", { 
 
    class: 'square' 
 
}); 
 

 
$(document).ready(function() { 
 
    for (var i = 0; i < columns; i++) { 
 
     $row.append($square.clone()); 
 
    } 
 
    
 
    for (var x = 0; x < rows; x++) { 
 
     $(".box_main").append($row.clone()); 
 
    } 
 

 
    $(".left1").click(function() { 
 
     $(".square").hover(function() { 
 
      $(this).css("background", "#000"); 
 
     }); 
 
    }); 
 

 
    $(".left2").click(function() { 
 
     $(".square").hover(function() { 
 
      $(this).css("background", "#cfd8dc"); 
 
      $(this).fadeToggle("2500"); \t 
 
     }); 
 
    }); 
 

 
    $(".right1").click(function() { 
 
     location.reload(); 
 
    }); 
 

 
    $(".right2").click(function() { 
 
     $(".square").hover(function() { 
 
      var rainbow = ["red", "blue", "yellow", "green", "pink", "violet", "purple", "brown", "aqua", "gold"]; 
 
      var rand = rainbow[Math.floor(Math.random() * rainbow.length)]; 
 
      $(this).css("background", rand); 
 
     }); 
 
    }); 
 

 
    $(".button_down").click(function() { 
 
     var setup = prompt("enter a value between 1 and 64", "0"); 
 
     var rows = setup; 
 
     var columns = setup; 
 

 
     $(".row").height(40/(16/rows)); 
 

 
     $(".square").height(40/(16/columns)); 
 
     $(".square").height(40/(16/columns)); 
 
    }); 
 
});

CSS：

.box_main { 
 
    height: 640px; 
 
    width: 640px; 
 
    margin: auto; 
 
    box-shadow: 0px 0px 40px 15px; 
 
} 
 

 
.button_down { 
 
    width: 300px; 
 
} 
 

 
.row { 
 
    width: auto; 
 
    height: 40px; 
 
    background: #313131; 
 
} 
 

 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin: 0; 
 
    display: inline-block; 
 
    background: #fff; 
 
}

Answer 1

确定这里是一个解决方案（与索姆e其他更改以避免在每次效果更改后堆叠悬停事件）。此外，我除去行包装器，因为它很容易，只需正确尺寸元素来完成和float:left

的基本思想是使每平方米的尺寸(100/columnsize)%

var rows = 16; 
 
var columns = 16; 
 
var $square = $("<div />", { 
 
    class: 'square' 
 
}); 
 

 
function fillGrid() { 
 
    var box = $(".box_main").empty(); 
 
    for (var i = 0; i < rows*columns; i++) { 
 
    box.append($square.clone()); 
 
    } 
 
} 
 

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

 
    var hoverEffects = { 
 
    black: function() { 
 
     $(this).css("background", "#000") 
 
    }, 
 
    colorFade: function() { 
 
     $(this).css("background", "#cfd8dc"); 
 
     $(this).fadeToggle("2500"); 
 
    }, 
 
    rainbow: function() { 
 
     var rainbow = ["red", "blue", "yellow", "green", "pink", "violet", "purple", "brown", "aqua", "gold"]; 
 
     var rand = rainbow[Math.floor(Math.random() * rainbow.length)]; 
 
     $(this).css("background", rand); 
 
    } 
 
    }; 
 
    var activeEffect = $.noop; 
 

 
    $(".left1").click(function() {activeEffect = hoverEffects.black}); 
 
    $(".left2").click(function() {activeEffect = hoverEffects.colorFade}); 
 
    $(".right1").click(function() {location.reload();}); 
 
    $(".right2").click(function() {activeEffect = hoverEffects.rainbow}); 
 

 
    // use delegated syntax so that we do not have to reapply handlers after 
 
    // each grid rebuild 
 
    $('.box_main').on('mouseenter mouseleave','.square',function() { 
 
    activeEffect.apply(this); 
 
    }) 
 

 
    $(".button_down").click(function() { 
 
    var setup = prompt("enter a value between 1 and 64", "0"); 
 
    // use rows/columns without var to reuse the global variables 
 
    rows = setup; 
 
    columns = setup; 
 
    fillGrid(); 
 
    $(".square").width(100/columns + '%'); 
 
    $(".square").height(100/rows + '%'); 
 
    }); 
 
});

.box_main { 
 
    height: 640px; 
 
    width: 640px; 
 
    margin: auto; 
 
    box-shadow: 0px 0px 40px 15px; 
 
    background: #313131; 
 
} 
 
.button_down { 
 
    width: 300px; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin: 0; 
 
    float: left; 
 
    background: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box_main"></div> 
 
<button class="left1">black</button> 
 
<button class="left2">faded</button> 
 
<button class="button_down">resize</button> 
 
<button class="right1">reload</button> 
 
<button class="right2">rainbow</button>