本教程旨在帮助开发者实现一个功能：根据用户在文本框中输入的数值，动态地从一个图库中显示对应数量的图片。我们将使用 jQuery 和 JavaScript 实现这一功能，并提供两种方案：顺序显示和随机显示，同时提供完整的代码示例和详细的步骤说明，帮助你快速掌握该技巧。
准备工作
在开始之前，请确保你已经引入了以下必要的库文件：
- jQuery: 用于简化 DOM 操作和事件处理。
- Bootstrap (可选): 用于提供基础的 CSS 样式和模态框组件。
你可以通过 CDN 引入这些库，或者下载到本地后引入。以下是 CDN 引入的示例：
HTML 结构
首先，我们需要创建包含图片元素的 HTML 结构。这里我们使用 img 标签，并为每个图片添加一个唯一的 id，例如 no1、no2 等。 所有的图片初始状态都隐藏。
@@##@@ @@##@@ @@##@@ @@##@@
同时，我们需要一个文本框 (input) 用于接收用户输入的数值，和一个按钮 (button) 用于触发图片显示的事件。
CSS 样式
为了控制图片的大小和显示效果，可以添加一些 CSS 样式：
.imgC {
width: 60px;
height: 60px;
margin-top: 5px;
}
.hide {
display: none;
}
.show {
display: block;
}JavaScript 代码实现
接下来，我们将使用 jQuery 编写 JavaScript 代码来实现动态显示图片的功能。
方案一：顺序显示图片
这种方案会按照图片在 HTML 中出现的顺序，依次显示指定数量的图片。
$(function() {
function showImages(int) {
$("img[id^='no']").removeClass("show").addClass("hide"); // 隐藏所有图片
$("img[id^='no']:lt(" + int + ")").addClass("show").removeClass("hide"); // 显示前 int 张图片
}
$('#myModal').modal('show');
$("#clsSub").click(function() {
var imgVal = parseInt($("#divimages").val());
var drpVal = $("#dropZone").val();
if (drpVal !== "" && imgVal <= 30) {
showImages(imgVal);
$('#myModal').modal('hide');
}
});
});这段代码首先定义了一个 showImages 函数，该函数接收一个整数 int 作为参数，用于指定要显示的图片数量。
- $("img[id^='no']").removeClass("show").addClass("hide"); 这行代码首先隐藏了所有 id 以 "no" 开头的 img 元素。
- $("img[id^='no']:lt(" + int + ")").addClass("show").removeClass("hide"); 这行代码使用了 :lt() 选择器，它会选择 id 以 "no" 开头的 img 元素中，索引小于 int 的元素，然后将这些元素显示出来。
然后，代码绑定了按钮的点击事件。当用户点击按钮时，代码会获取文本框中的数值，并调用 showImages 函数来显示对应数量的图片。
方案二：随机显示图片
这种方案会随机选择指定数量的图片进行显示。
$(function() {
function showImages(int) {
$("img[id^='no']").removeClass("show").addClass("hide");
for (var i = 0; i < int; i++) {
var n = Math.floor(Math.random() * $("img[id^='no']:not('.show')").length);
$("img[id^='no']:not('.show')").eq(n).toggleClass("hide show");
}
}
$('#myModal').modal('show');
$("#clsSub").click(function() {
var imgVal = parseInt($("#divimages").val());
var drpVal = $("#dropZone").val();
if (drpVal !== "" && imgVal <= 30) {
showImages(imgVal);
$('#myModal').modal('hide');
}
});
});与顺序显示方案不同的是，这段代码在 showImages 函数中使用了一个循环，每次循环都会随机选择一个未显示的 img 元素，并将其显示出来。
- Math.floor(Math.random() * $("img[id^='no']:not('.show')").length) 这行代码用于生成一个随机索引，该索引的范围是从 0 到未显示的 img 元素的数量减 1。
- $("img[id^='no']:not('.show')").eq(n).toggleClass("hide show"); 这行代码用于切换随机选择的 img 元素的显示状态。
注意事项
- 图片数量限制: 在实际应用中，应该对用户输入的数值进行验证，避免超出图库中图片的数量。
- 错误处理: 可以添加错误处理机制，例如当用户输入的不是数字时，给出相应的提示。
- 性能优化: 如果图库中的图片数量非常大，可以考虑使用分页或者懒加载等技术来优化性能。
- DrpVal验证： 代码中对drpVal做了非空验证，在实际使用中，请根据需要进行修改。
总结
通过本教程，你学习了如何使用 jQuery 和 JavaScript 实现根据文本框数值动态显示图库图片的功能。你可以根据实际需求选择顺序显示或者随机显示方案，并根据注意事项对代码进行优化和改进。希望本教程能够帮助你快速掌握这一实用技巧！
