本教程旨在指导开发者如何利用 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 应用。
