国产成年女人特黄特色毛片免 ,欧美性videos高清另类,国产成人亚洲精品

使用 jquery 根據(jù)文本框的值動態(tài)顯示圖片

本文介紹如何使用 jQuery 實現(xiàn)一個圖片畫廊，根據(jù)文本框輸入的值，動態(tài)地顯示對應數(shù)量的圖片。我們將從隱藏所有圖片開始，然后根據(jù)用戶在文本框中輸入的數(shù)字，隨機顯示相應數(shù)量的圖片。本文提供了兩種實現(xiàn)方式，一種是順序顯示，另一種是隨機顯示，并附帶完整的代碼示例和注意事項。

準備工作

首先，確保你的 HTML 文件中引入了 jQuery 庫和 Bootstrap 庫（用于樣式和模態(tài)框）。以下是需要引入的 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 結構主要包含一個模態(tài)框（用于輸入圖片數(shù)量）和一個用于顯示圖片的容器。

<div class="container-fluid">
  <!-- 模態(tài)框 -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- 模態(tài)框頭部 -->
        <div class="modal-header">
          <h4 class="modal-title">請輸入圖片數(shù)量</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模態(tài)框主體 -->
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-5">
              <label>圖片數(shù)量</label>
            </div>
            <div>
              <label>Drop Zones 數(shù)量</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>
        <!-- 模態(tài)框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">關閉</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 模態(tài)框結束 -->

  <!-- 圖片容器 -->
  <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 代碼實現(xiàn) (順序顯示)

以下是使用 jQuery 實現(xiàn)順序顯示圖片的代碼。該代碼首先隱藏所有圖片，然后根據(jù)文本框的值，顯示對應數(shù)量的圖片。

$(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 代碼實現(xiàn) (隨機顯示)

如果需要隨機顯示圖片，可以使用以下代碼：

$(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。
然后，循環(huán) int 次，每次循環(huán)隨機選擇一個當前未顯示的圖片，并切換其 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>

登錄后復制