jQueryでprompt（）を使用してグリッド設定を変更

Question

プロンプトに数字<を入力した後に行と四角の数を何とか変更できますか？私は "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

[OK]を、ここでは、SOMとソリューション（です各エフェクトが変更された後のホバーイベントの積み重ねを避けるための追加の変更。）。グリッドを再構築する必要があります。また、私はそれだけで正しいサイズの要素を達成することが容易であると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>