jQuery onload 代码如何可重复用于缩略图 2 和 3

Question

我正在构建的应用程序具有三个输入 [type="file"]。第一个上传输入目标是缩略图 1，第二个上传输入目标是第二个缩略图，依此类推。jQuery 加载代码适用于第一个缩略图。有没有办法在不重复代码的情况下使代码可重复用于缩略图 2 和 3？$(window).on('load', function() {  var files = $("input[type=file]");  files.change(function(e) {    if (this.files && this.files[0]) {      var reader = new FileReader();      reader.onload = function(e) {        $(".thumbnail-one img").attr("src", e.target.result);        $('.full-image img').attr("src", e.target.result);      }      reader.readAsDataURL(this.files[0]);    }  });});$(document).ready(function() {  $('.box').click(function() {    $('.full-image').html($(this).html());    console.log(this);  });});body {  font-family: 'Poppins', Verdana, Arial, sans-serif;}fieldset {  background-color: lavender;  border: 10px solid darkblue;  border-radius: 20px;  margin: 20px auto;  width: 720px;}legend {  background-color: purple;  border-radius: 10px;  color: white;  padding: 12px;}fieldset div {  margin: 10px;}label {  display: inline-block;  text-align: right;  vertical-align: top;  width: 200px;}.container {  width: 60%;  overflow: hidden;  margin: 100px auto;}.box {  width: 100px;  height: auto;  padding: 10px;}.box {  cursor: pointer;}.full-image {  width: 580px;  height: 580px;  padding: 10px;}.col {  float: right;}.full-image img {  width: 100%;  /* height: 100%; */}.closebtn {  position: absolute;  top: 10px;  right: 15px;  color: white;  font-size: 35px;  cursor: pointer;}

Answer 1

function imgUploaded(event, thumbnail){

    var fileInput = event.target;

    if (fileInput.files && fileInput.files[0]) {

      var reader = new FileReader();

      reader.onload = function(e) {

        $("." +thumbnail +" img").attr("src", e.target.result);

        $('.full-image img').attr("src", e.target.result);

      }

      reader.readAsDataURL(fileInput.files[0]);

  }

}

$(document).ready(function() {

  $('.box').click(function() {

    $('.full-image').html($(this).html());

  });

});

body {

  font-family: 'Poppins', Verdana, Arial, sans-serif;

}

fieldset {

  background-color: lavender;

  border: 10px solid darkblue;

  border-radius: 20px;

  margin: 20px auto;

  width: 720px;

}

legend {

  background-color: purple;

  border-radius: 10px;

  color: white;

  padding: 12px;

}

fieldset div {

  margin: 10px;

}

label {

  display: inline-block;

  text-align: right;

  vertical-align: top;

  width: 200px;

}

.container {

  width: 60%;

  overflow: hidden;

  margin: 100px auto;

}

.box {

  width: 100px;

  height: auto;

  padding: 10px;

}

.box {

  cursor: pointer;

}

.full-image {

  width: 580px;

  height: 580px;

  padding: 10px;

}

.col {

  float: right;

}

.full-image img {

  width: 100%;

  /* height: 100%; */

}

.closebtn {

  position: absolute;

  top: 10px;

  right: 15px;

  color: white;

  font-size: 35px;

  cursor: pointer;

}

<title>Image Gallery App</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<fieldset>

  <legend>Your Images</legend>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" onchange="imgUploaded(event, 'thumbnail-one')" name="avatar" required="">

  </div>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" onchange="imgUploaded(event, 'thumbnail-two')" name="avatar" required="">

  </div>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" onchange="imgUploaded(event, 'thumbnail-three')" name="avatar" required="">

  </div>

</fieldset>

<div class="container">

  <div class="col">

    <div class="box thumbnail-one">

      <img src="https://http.cat/100" alt="Nature" style="width:100%">

    </div>

    <div class="box thumbnail-two">

      <img src="https://http.cat/405" alt="Snow" style="width:100%">

    </div>

    <div class="box thumbnail-three">

      <img src="https://http.cat/504" alt="Mountains" style="width:100%">

    </div>

  </div>

  <div class="col">

    <div class="full-image">

      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

      <img src="https://http.cat/100" id="expandedImg" />

    </div>

  </div>

</div>

Answer 2

1. 向您添加新attribute data-thumb的输入并在此处添加相应的缩略图类，例如data-thumb='thumbnail-one' data-thumb='thumbnail-two'. 你的输入看起来像<input type="file" id="avatar" name="avatar" data-thumb='one' required="">

2. 用于let thumb = $(this).data('thumb');获取内部的缩略图类值files.change(function(e) {...}。请注意，您也可以使用let thumb = $(this).attr('data-thumb');.

3. $("." + thumb + " img").attr("src", e.target.result);用作选择器。

PS正如@AlwaysHelping 在评论中提到的那样，并且根据建议，您应该始终使用唯一id值。因为如果你使用#avatar它，它总是会返回withfirst中的元素。同样在形式上它可能会导致问题。DOMid = avatarpostback

$(window).on('load', function() {

  var files = $("input[type=file]");

  files.change(function(e) {

    if (this.files && this.files[0]) {

      let thumb = $(this).data('thumb');

      // let thumb = $(this).attr('data-thumb'); // alternative to above line.

      var reader = new FileReader();

      reader.onload = function(e) {

        $("." + thumb + " img").attr("src", e.target.result);

        $('.full-image img').attr("src", e.target.result);

      }

      reader.readAsDataURL(this.files[0]);

    }

  });

});

$(document).ready(function() {

  $('.box').click(function() {

    $('.full-image').html($(this).html());

    console.log(this);

  });

});

body {

  font-family: 'Poppins', Verdana, Arial, sans-serif;

}

fieldset {

  background-color: lavender;

  border: 10px solid darkblue;

  border-radius: 20px;

  margin: 20px auto;

  width: 720px;

}

legend {

  background-color: purple;

  border-radius: 10px;

  color: white;

  padding: 12px;

}

fieldset div {

  margin: 10px;

}

label {

  display: inline-block;

  text-align: right;

  vertical-align: top;

  width: 200px;

}

.container {

  width: 60%;

  overflow: hidden;

  margin: 100px auto;

}

.box {

  width: 100px;

  height: auto;

  padding: 10px;

}

.box {

  cursor: pointer;

}

.full-image {

  width: 580px;

  height: 580px;

  padding: 10px;

}

.col {

  float: right;

}

.full-image img {

  width: 100%;

  /* height: 100%; */

}

.closebtn {

  position: absolute;

  top: 10px;

  right: 15px;

  color: white;

  font-size: 35px;

  cursor: pointer;

}

<title>Image Gallery App</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<fieldset>

  <legend>Your Images</legend>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" id="avatar1" name="avatar1" data-thumb='thumbnail-one' required="">

  </div>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" id="avatar2" name="avatar2" data-thumb='thumbnail-two' required="">

  </div>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" id="avatar3" name="avatar3" data-thumb='thumbnail-three' required="">

  </div>

</fieldset>

<div class="container">

  <div class="col">

    <div class="box thumbnail-one">

      <img src="https://http.cat/100" alt="Nature" style="width:100%">

    </div>

    <div class="box thumbnail-two">

      <img src="https://http.cat/405" alt="Snow" style="width:100%">

    </div>

    <div class="box thumbnail-three">

      <img src="https://http.cat/504" alt="Mountains" style="width:100%">

    </div>

  </div>

  <div class="col">

    <div class="full-image">

      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

      <img src="https://http.cat/100" id="expandedImg" />

    </div>

  </div>

</div>