jquery - 在 jQuery 中使用 prompt() 更改网格设置

Question

在提示中输入小于 64 的数字后，行数和方 block 数是否可以更改？我不想改变“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");	
        });
    });

    $(".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

好的，这是一个解决方案(有一些额外的更改以避免在每次效果更改后堆叠悬停事件)。我还删除了行包装器，因为只用正确大小的元素和 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>