基于文本框数值动态显示图库图片的教程_技术教程

本教程旨在帮助开发者实现一个功能：根据用户在文本框中输入的数值，动态地从一个图库中显示对应数量的图片。我们将使用 jQuery 和 JavaScript 实现这一功能，并提供两种方案：顺序显示和随机显示，同时提供完整的代码示例和详细的步骤说明，帮助你快速掌握该技巧。

准备工作

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

jQuery: 用于简化 DOM 操作和事件处理。
Bootstrap (可选): 用于提供基础的 CSS 样式和模态框组件。

你可以通过 CDN 引入这些库，或者下载到本地后引入。以下是 CDN 引入的示例：

HTML 结构

首先，我们需要创建包含图片元素的 HTML 结构。这里我们使用 img 标签，并为每个图片添加一个唯一的 id，例如 no1、no2 等。所有的图片初始状态都隐藏。

  
  
    
      
        
        
          请更新数值
          
        
        
        
          
            
              图片数量
            
            
              Drop Zones数量
            
            
              
            
            
              
            
            提交
          
        
        
        
          
        
      
    
  
  

  
    
      @@##@@
      @@##@@
      @@##@@
      
      @@##@@

同时，我们需要一个文本框 (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 元素的显示状态。