本教程旨在指导开发者如何利用 jQuery，根据文本框中输入的数值，动态地从图库中显示相应数量的图片。我们将提供两种实现方式：顺序显示和随机显示，并附带完整的代码示例和详细的解释，帮助你快速掌握这一实用技巧。该方案无需编写大量的if else判断，实现简洁高效。
准备工作
在开始之前，请确保你已经引入了以下必要的库：
jQuery: 用于简化 DOM 操作和事件处理。Bootstrap (可选): 用于提供基本的页面样式和 Modal 弹窗。jQuery UI (可选): 如果需要更丰富的 UI 交互。
你可以通过 CDN 引入这些库，例如：
HTML 结构
首先，我们需要一个包含图片元素的容器，以及一个用于输入数字的文本框。这里使用一个 div 作为图片容器，内部包含多个 img 标签，并为每个 img 标签赋予一个以 “no” 开头的 id，方便后续的 jQuery 选择器操作。 同时，我们使用Bootstrap的Modal组件，创建一个弹窗，用于用户输入需要显示的图片数量。
@@##@@ @@##@@ @@##@@ @@##@@
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” 类，从而显示该图片。
总结与注意事项
本教程提供了两种根据文本框数值动态显示图库图片的方法：顺序显示和随机显示。使用 :lt() 选择器可以方便地实现顺序显示。随机显示需要稍微复杂一些的逻辑，需要先隐藏所有图片，然后随机选择指定数量的图片进行显示。在实际应用中，可以根据具体需求选择合适的实现方式。需要注意对用户输入的数值进行校验，避免出现错误。如果图片数量较多，可以考虑使用分页或懒加载等技术来提高性能。本示例使用了 Bootstrap 的 Modal 组件，如果不需要弹窗，可以将其移除，并直接在页面上显示文本框和图片容器。请确保所有图片都位于正确的路径下，并且文件名正确。
通过本教程，你已经掌握了如何利用 jQuery，根据文本框中输入的数值，动态地从图库中显示相应数量的图片。希望这些技巧能帮助你更好地开发 Web 应用。
以上就是基于文本框数值动态显示图库图片：jQuery 教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585375.html
微信扫一扫 
支付宝扫一扫 
