使用 jQuery 根据文本框的值动态显示图片-html教程-PHP中文网

使用 jquery 根据文本框的值动态显示图片

本文介绍如何使用 jQuery 实现一个图片画廊，根据文本框输入的值，动态地显示对应数量的图片。我们将从隐藏所有图片开始，然后根据用户在文本框中输入的数字，随机显示相应数量的图片。本文提供了两种实现方式，一种是顺序显示，另一种是随机显示，并附带完整的代码示例和注意事项。

准备工作

首先，确保你的 HTML 文件中引入了 jQuery 库和 Bootstrap 库（用于样式和模态框）。以下是需要引入的 CSS 和 JavaScript 文件：

<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>

登录后复制

同时，你需要准备一些图片资源，并按照 images/1.png, images/2.png ... images/n.png 的格式命名，放置在 images 文件夹下。

HTML 结构

HTML 结构主要包含一个模态框（用于输入图片数量）和一个用于显示图片的容器。

<div class="container-fluid">
  <!-- 模态框 -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">请输入图片数量</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-5">
              <label>图片数量</label>
            </div>
            <div>
              <label>Drop Zones 数量</label>
            </div>
            <div class="col-sm-5">
              <input type="text" id='divimages' name="text" class="form-control input-sm numbers" />
            </div>
            <div class="col-sm-5">
              <input type="text" name="" id='dropZone' value="" class="form-control input-sm drpimg" />
            </div>
            <div class="col-sm-2 btn btn-primary btn-sm" id="clsSub">提交</div>
          </div>
        </div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 模态框结束 -->

  <!-- 图片容器 -->
  <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>

登录后复制

jQuery 代码实现 (顺序显示)

以下是使用 jQuery 实现顺序显示图片的代码。该代码首先隐藏所有图片，然后根据文本框的值，显示对应数量的图片。

$(function() {
  function showImages(int) {
    $("img[id^='no']").hide();
    $("img[id^='no']:lt(" + int + ")").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');
    }
  });
});

登录后复制

这段代码的关键在于 $("img[id^='no']:lt(" + int + ")").show(); 这行代码使用了 :lt() 选择器，它选择所有 id 以 no 开头的，且索引小于 int 的 img 元素，并将它们显示出来。

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

jQuery 代码实现 (随机显示)

如果需要随机显示图片，可以使用以下代码：

$(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);
      console.log(i, n);
      $("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');
    }
  });
});

登录后复制

这段代码的关键在于：

首先，为所有图片添加 hide class，移除 show class。
然后，循环 int 次，每次循环随机选择一个当前未显示的图片，并切换其 hide 和 show class。

为了使代码生效，还需要添加以下 CSS 样式：

.hide {
  display: none;
}

.show {
  display: block;
}

登录后复制

完整代码示例 (随机显示)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Image Gallery</title>
  <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">
  <style>
    .imgC {
      width: 60px;
      height: 60px;
      margin-top: 5px;
    }

    .wth {
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }

    .hide {
      display: none;
    }

    .show {
      display: block;
    }
  </style>
</head>
<body>

<div class="container-fluid">
  <!-- The 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">
              <input type="text" id='divimages' name="text" class="form-control input-sm numbers" />
            </div>
            <div class="col-sm-5">
              <input type="text" name="" id='dropZone' value="" class="form-control input-sm drpimg" />
            </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 -->
  <!-- container end -->

  <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="no4" src="images/4.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no5" src="images/5.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no6" src="images/6.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no7" src="images/7.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no8" src="images/8.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no9" src="images/9.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no10" src="images/10.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no11" src="images/11.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no12" src="images/12.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no13" src="images/13.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no14" src="images/14.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no15" src="images/15.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no16" src="images/16.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no17" src="images/17.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no18" src="images/18.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no19" src="images/19.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no20" src="images/20.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no21" src="images/21.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no22" src="images/22.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no23" src="images/23.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no24" src="images/24.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no25" src="images/25.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no26" src="images/26.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no27" src="images/27.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no28" src="images/28.png" class="imgC ">
      <img draggable="true" ondragstart="drag(event)" id="no29" src="images/29.png" class="imgC ">
    </div>
  </div>
  <div>
  </div>
</div>

<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>
<script>
  $(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);
        console.log(i, n);
        $("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');
      }
    });
  });
</script>

</body>
</html>

登录后复制