Обновить только один элемент при совместном использовании одного и того же класса

У меня ниже jquery, который показывает предварительный просмотр изображения из ввода файла.

$(".imgshowinput").change(function () {
    readURL(this);
});


function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.imgshow').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Приведенный выше код работает хорошо, но проблема обновляет все элементы img, используя один и тот же класс.

снимок экрана Обновить только один элемент при совместном использовании одного и того же класса

лезвие

<div class = "card" style = "width: 18rem;">
    <img id = "studphoto" name = "studphoto" class = "card-img-top imgshow" src = "" alt = "Card image cap">
    <div class = "card-body">             
        <input type = "file" name = "spic" class = "imgshowinput" accept = "image/*">
    </div>
</div>
<div class = "card" style = "width: 18rem;">
<img id = "aadphoto" name = "aadphoto" class = "card-img-top imgshow" src = "" alt = "Card image cap">
    <div class = "card-body">
        <input type = "file" name = "aadpic" class = "imgshowinput" accept = "image/*">
    </div>
</div>

Любое предложение обновить только определенный элемент img при использовании того же класса?

javascript php html jquery laravel

12.05.2022 14:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Просто добавьте идентификатор img, который вы хотите изменить, чтобы функция была:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#studphoto.imgshow').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

12.05.2022 14:24

Используйте закрытый метод jquery, как показано ниже.

$(input).closest('.imgshow'). attr('src', e.target.result);

и полный javascript

$(".imgshowinput").change(function () {
readURL(this);
});
function readURL(input) {
   if (input.files && input.files[0]) {
     var reader = new FileReader();

     reader.onload = function (e) {
          $(input).closest('.imgshow'). attr('src', e.target.result);
     }

    reader.readAsDataURL(input.files[0]);
 }
}

12.05.2022 14:39

Ответ принят как подходящий

Просто обновите свою функцию readURL следующим образом:

function readURL(input) {
  // Gets .card for this input
  var card = $(input).parent().parent();
  
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) { 
          // Finds img inside of .card and sets the attribute    
          $(card.find('img').attr('src', e.target.result));
        }
        reader.readAsDataURL(input.files[0]);
    }
}

Я решил это для вас на моей странице кодовая ручка.

$(".imgshowinput").change(function () {
    readURL(this);
});

function readURL(input) {
  var card = $(input).parent().parent();
  
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {     
          $(card.find('img').attr('src', e.target.result));
        }
        reader.readAsDataURL(input.files[0]);
    }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #fcbe24;
  background-color: #18222d;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.test {
  display: flex;
}
img {
  width: auto;
  height: 200px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "card" style = "width: 18rem;">
    <img id = "studphoto" name = "studphoto" class = "card-img-top imgshow" src = "" alt = "Card image cap">
    <div class = "card-body">             
        <input type = "file" name = "spic" class = "imgshowinput" accept = "image/*">
    </div>
</div>
<div class = "card" style = "width: 18rem;">
<img id = "aadphoto" name = "aadphoto" class = "card-img-top imgshow" src = "" alt = "Card image cap">
    <div class = "card-body">
        <input type = "file" name = "aadpic" class = "imgshowinput" accept = "image/*">
    </div>
</div>

12.05.2022 14:58

Другие вопросы по теме

Как реализовать заполнитель в файле php для плагина Moodle?

MongoDb и Laravel 8.83

PHP 8.1 $_FILES отсутствует свойство типа

Как получить записи за последние 3 дня из базы данных без сегодняшнего дня?

Нужно ли явно возвращать все ответы API с помощью функции json?

Создание объекта по умолчанию из пустого значения Yii2

Подзапрос Laravel с построителем запросов

Сохранение файла локально, а не на сервере

Laravel: проблема с отображением изображения из папки хранилища

Возврат значения оператора if в функции PHP

Обновить только один элемент при совместном использовании одного и того же класса

Ответы 3

Другие вопросы по теме

Похожие вопросы