基于文本框数值动态显示图库图片：jQuery 教程-html教程-PHP中文网

基于文本框数值动态显示图库图片：jQuery 教程

花韻仙語

发布： 2025-10-17 09:57:01

原创

180人浏览过

基于文本框数值动态显示图库图片：jquery 教程

本教程旨在指导开发者如何利用 jQuery，根据文本框中输入的数值，动态地从图库中显示相应数量的图片。我们将提供两种实现方式：顺序显示和随机显示，并附带完整的代码示例和详细的解释，帮助你快速掌握这一实用技巧。该方案无需编写大量的if else判断，实现简洁高效。

准备工作

在开始之前，请确保你已经引入了以下必要的库：

jQuery: 用于简化 DOM 操作和事件处理。
Bootstrap (可选): 用于提供基本的页面样式和 Modal 弹窗。
jQuery UI (可选): 如果需要更丰富的 UI 交互。

你可以通过 CDN 引入这些库，例如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>

登录后复制

HTML 结构

首先，我们需要一个包含图片元素的容器，以及一个用于输入数字的文本框。这里使用一个 div 作为图片容器，内部包含多个 img 标签，并为每个 img 标签赋予一个以 "no" 开头的 id，方便后续的 jQuery 选择器操作。同时，我们使用Bootstrap的Modal组件，创建一个弹窗，用于用户输入需要显示的图片数量。

<div class="container-fluid">
  <!-- Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Please Update the values</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-5">
              <label>Number of images</label>
            </div>
            <div>
              <label>number of drop Zones</label>
            </div>
            <div class="col-sm-5">
              <input type="text" id='divimages' name="text" class="form-control input-sm numbers" />
            </div>
            <div class="col-sm-5">
              <input type="text" name="" id='dropZone' value="" class="form-control input-sm drpimg" />
            </div>
            <div class="col-sm-2 btn btn-primary btn-sm" id="clsSub">Submit</div>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- modal close -->

  <div class="container" style="border: 1px solid red; height: 250px; display: inline-flex;">
    <div class="row" id="gallery" style="width: 100%">
      <img draggable="true" ondragstart="drag(event)" id="no1" src="images\1.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no2" src="images\2.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no3" src="images\3.png" class="imgC ">
      <!-- 更多图片... -->
      <img draggable="true" ondragstart="drag(event)" id="no29" src="images\29.png" class="imgC ">
    </div>
  </div>
</div>

登录后复制

CSS 样式

添加一些基本的 CSS 样式，使图片排列整齐：

.imgC {
  width: 60px;
  height: 60px;
  margin-top: 5px;
}

.wth {
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

.hide {
  display: none;
}

.show {
  display: block;
}

登录后复制

jQuery 实现：顺序显示

使用 jQuery 的 :lt() 选择器可以很方便地实现顺序显示。该选择器用于选取匹配集合中索引值小于给定 index 值的元素。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

$(function() {
  function showImages(int) {
    $("img[id^='no']").hide(); // 隐藏所有图片
    $("img[id^='no']:lt(" + int + ")").show(); // 显示前 int 张图片
  }

  $('#myModal').modal('show'); // 显示 Modal 弹窗

  $("#clsSub").click(function() {
    var imgVal = parseInt($("#divimages").val()); // 获取文本框中的数值
    var drpVal = $("#dropZone").val(); // 获取 number of drop Zones 文本框中的数值
    if (drpVal !== "" && imgVal <= 30) {
      showImages(imgVal); // 调用 showImages 函数
      $('#myModal').modal('hide'); // 关闭 Modal 弹窗
    }
  });
});

登录后复制

代码解释：

$("img[id^='no']"): 选取所有 id 以 "no" 开头的 img 标签。
.hide(): 隐藏选取的元素。
$("img[id^='no']:lt(" + int + ")"): 选取 id 以 "no" 开头，且索引值小于 int 的 img 标签。
.show(): 显示选取的元素。
parseInt($("#divimages").val()): 获取 id 为 "divimages" 的文本框的值，并将其转换为整数。
$('#myModal').modal('show'): 使用 Bootstrap 的 Modal 组件，显示 id 为 "myModal" 的弹窗。
$('#myModal').modal('hide'): 使用 Bootstrap 的 Modal 组件，隐藏 id 为 "myModal" 的弹窗。

jQuery 实现：随机显示

如果需要随机显示图片，则需要稍微复杂一些的逻辑。

$(function() {
  function showImages(int) {
    $("img[id^='no']").removeClass("show").addClass("hide"); // 隐藏所有图片，并移除 show 类，添加 hide 类
    for (var i = 0; i < int; i++) {
      var n = Math.floor(Math.random() * $("img[id^='no']:not('.show')").length); // 生成一个随机索引
      console.log(i, n);
      $("img[id^='no']:not('.show')").eq(n).toggleClass("hide show"); // 切换 hide 和 show 类，显示随机图片
    }
  }

  $('#myModal').modal('show'); // 显示 Modal 弹窗

  $("#clsSub").click(function() {
    var imgVal = parseInt($("#divimages").val()); // 获取文本框中的数值
    var drpVal = $("#dropZone").val(); // 获取 number of drop Zones 文本框中的数值
    if (drpVal !== "" && imgVal <= 30) {
      showImages(imgVal); // 调用 showImages 函数
      $('#myModal').modal('hide'); // 关闭 Modal 弹窗
    }
  });
});

登录后复制

代码解释：

$("img[id^='no']").removeClass("show").addClass("hide"): 首先隐藏所有图片，并使用 removeClass 和 addClass 方法分别移除 "show" 类和添加 "hide" 类。这样做是为了方便后续的随机选择。
$("img[id^='no']:not('.show')"): 选取所有 id 以 "no" 开头，且不包含 "show" 类的 img 标签。 :not() 选择器用于排除已经显示的图片。
Math.floor(Math.random() * $("img[id^='no']:not('.show')").length): 生成一个随机索引，用于从剩余的隐藏图片中选择一个。
$("img[id^='no']:not('.show')").eq(n).toggleClass("hide show"): 使用 eq(n) 方法选取索引为 n 的图片，并使用 toggleClass 方法切换 "hide" 和 "show" 类，从而显示该图片。