登录
首页 >  文章 >  前端

jQuery数值控制图库动态显示教程

时间：2025-10-20 18:09:42 213浏览 收藏

想要实现图库图片的动态展示吗？本教程将手把手教你利用 jQuery，根据文本框输入的数值，轻松控制图库中显示的图片数量。无论你是想按顺序还是随机展示图片，我们都提供了简洁高效的解决方案，无需编写繁琐的if else判断。本教程包含完整的代码示例和详细解释，助你快速掌握这一实用技巧，打造更具交互性的Web应用。首先，我们将介绍准备工作，包括jQuery、Bootstrap(可选)和jQuery UI(可选)的引入。接着，我们将搭建HTML结构，包括图片容器和输入框，并利用Bootstrap的Modal组件实现弹窗输入。最后，我们将分别讲解顺序显示和随机显示的jQuery实现方法，并提供详细的代码解释。立即学习，让你的图库图片展示更具活力！

基于文本框数值动态显示图库图片：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">
              &lt;input type=&quot;text&quot; id=&apos;divimages&apos; name=&quot;text&quot; class=&quot;form-control input-sm numbers&quot; /&gt;
            </div>
            <div class="col-sm-5">
              &lt;input type=&quot;text&quot; name=&quot;&quot; id=&apos;dropZone&apos; value=&quot;&quot; class=&quot;form-control input-sm drpimg&quot; /&gt;
            </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 弹窗
    }
  });
});

代码解释：

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

代码解释：

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

总结与注意事项

  • 本教程提供了两种根据文本框数值动态显示图库图片的方法：顺序显示和随机显示。
  • 使用 :lt() 选择器可以方便地实现顺序显示。
  • 随机显示需要稍微复杂一些的逻辑，需要先隐藏所有图片，然后随机选择指定数量的图片进行显示。
  • 在实际应用中，可以根据具体需求选择合适的实现方式。
  • 需要注意对用户输入的数值进行校验，避免出现错误。
  • 如果图片数量较多，可以考虑使用分页或懒加载等技术来提高性能。
  • 本示例使用了 Bootstrap 的 Modal 组件，如果不需要弹窗，可以将其移除，并直接在页面上显示文本框和图片容器。
  • 请确保所有图片都位于正确的路径下，并且文件名正确。

通过本教程，你已经掌握了如何利用 jQuery，根据文本框中输入的数值，动态地从图库中显示相应数量的图片。希望这些技巧能帮助你更好地开发 Web 应用。

今天关于《jQuery数值控制图库动态显示教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>