#javascript #jquery #next
#javascript #jquery #Далее
Вопрос:
В цикле foreach у меня есть несколько html-блоков, которые выглядят следующим образом:
<label class="">Replace image/poster:</label>
<input type="file" name="replaced_main_image" class="form-control-file-border input-image-preview" />
<!-- preview replaced main image -->
<br />
<label class="">Preview replaced image/poster:</label><br />
<img class="image-preview" width="100" src="#" /> <!-- preview image -->
Для предварительного просмотра только что выбранного изображения для загрузки я использую этот код:
// preview new selected image
function readURL(input) {
if (input.files amp;amp; input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.image-preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$(".input-image-preview").change(function() {
readURL(this);
});
Это работает нормально, но в этом случае каждый img с class img-preview
получает исходный код. И я хочу только следующий img с классом img-preview
.
Насколько я знаю, я должен изменить строку в функции и должен выглядеть примерно так:
reader.onload = function(e) {
find next --> $('.image-preview').attr('src', e.target.result);
}
Я не знаю, какой правильный синтаксис для этого….
Ответ №1:
Здесь:
$(input).nextAll('.image-preview').eq( 0 ).attr('src', e.target.result);
используйте input
в качестве источника, который вы передали в функцию, затем найдите все следующие .image-preview
и ограничьте его первым с помощью .eq( 0 )
Комментарии:
1.
$('.image-preview:eq(2)')
не показывает никакого предварительного просмотра вообще