求助：用jQuery在新窗口生成动态图片网格布局的代码问题排查

嘿，我来帮你排查下这个动态网格布局的问题～ 从你给出的代码片段来看，核心思路是对的，但可能在数值处理、新窗口传参/布局这几个环节踩了坑，我给你梳理下常见问题和修正方案：

首先，先看你代码里的潜在问题 #

你写的var ht = 150 * $("#mapht").val();这里有个小隐患：$("#mapht").val()获取的是字符串类型的输入值，虽然JS会隐式转成数字计算，但如果用户输入了非数字内容，就会得到NaN，导致后续逻辑失效。所以第一步要做的是显式转换数值类型。

完整的实现方案（分主页面和新窗口两部分） #

1. 主页面：处理用户输入，传递参数到新窗口

<!-- 输入控件 -->
<div>
  <label>行数：</label>
  <input type="number" id="mapht" min="1" value="2">
</div>
<div>
  <label>列数：</label>
  <input type="number" id="mapwd" min="1" value="3">
</div>
<button id="generateGrid">生成图片网格</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() {
  $("#generateGrid").click(function() {
    // 1. 读取并转换输入值为数字，加校验避免无效输入
    const rows = parseInt($("#mapht").val());
    const cols = parseInt($("#mapwd").val());
    
    if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
      alert("请输入有效的正整数哦");
      return;
    }

    // 2. 计算网格总尺寸（单张图150px）
    const gridHeight = 150 * rows;
    const gridWidth = 150 * cols;

    // 3. 打开新窗口，通过URL参数传递行列数
    const newWin = window.open(
      `grid-page.html?rows=${rows}&cols=${cols}`,
      "_blank",
      `width=${gridWidth},height=${gridHeight},menubar=no,toolbar=no`
    );
  });
});
</script>

2. 新窗口（grid-page.html）：渲染网格和图片

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.grid-container {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 0; /* 去掉网格间隙，让图片填满 */
}
.grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片自适应单元格，不拉伸变形 */
}
</style>

<div class="grid-container" id="gridContainer"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() {
  // 1. 从URL参数中读取行列数
  const params = new URLSearchParams(window.location.search);
  const rows = parseInt(params.get("rows"));
  const cols = parseInt(params.get("cols"));

  // 2. 设置网格布局
  $("#gridContainer").css({
    "grid-template-rows": `repeat(${rows}, 1fr)`,
    "grid-template-columns": `repeat(${cols}, 1fr)`
  });

  // 3. 生成对应数量的图片
  for (let i = 0; i < rows * cols; i++) {
    // 这里替换成你自己的图片URL即可
    const img = $(`<img class="grid-img" src="https://picsum.photos/150/150?rand=${i}" alt="网格图片${i+1}">`);
    $("#gridContainer").append(img);
  }
});
</script>

几个关键检查点 #

• 确保jQuery已经正确引入，没有404错误；
• 浏览器可能会限制新窗口的最小尺寸，所以新窗口里用100vh/100vw做布局比依赖窗口参数更可靠；
• 可以给输入框加min="1"属性，避免用户输入0或负数；
• 如果你的图片尺寸不是150x150，用object-fit: cover/contain来保证图片适配单元格，不会变形。

内容的提问来源于stack exchange，提问作者Kishkuman13