单击时替换动态生成的图像

Question

如何替换循环生成的动态图像？

上面的图像在mustache模板系统渲染的html中应如下所示。

{{#images}}

<div class="picture-caption">
    <img id="{{id}}" class="caption" src="./data/picture_caption/{{picture_caption}}" alt="your image" />
    <input id="image-value" data-id="{{id}}" class="image-box-{{id}}" type="file" style="display: none;" value="
{{picture_caption}}" />{{id}}
</div>

{{/answers}}

我做了编码并且只改变了循环中的第一个索引（这是儿子guko图像）

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

        reader.onload = function (e) {
            $("#"+caption_id).attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$(".caption").click(function(e) {
    var caption_id = $(this).attr('id');
    // console.log(caption_id);
    $(".image-box-"+caption_id).click();
});

$("#image-value").change(function(e){
    var caption_id = $(this).attr('data-id');
    // alert(caption_id);
    readURL(this, caption_id);
});

我可以做任何想法/替代方案来实现这个目标吗？

Answer 1

你有多个具有相同id（id="image-value"）的输入元素，这就是为什么jQuery在执行你绑定的onchange处理程序时只选取其中的第一个 - $("#image-value").change(function(e){...})。

所以将$("#image-value").change(function(e){...})替换为$('[type="file"]').change(function(e){...})，如下所示，将事件处理程序附加到所有输入元素。

检查演示 - Fiddle。

function readURL(input, caption_id) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#"+caption_id).attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$(".caption").click(function() {
    $(".image-box-"+this.id).click();
});

$('[type="file"]').change(function(e){
    var caption_id = $(this).attr('data-id');
    readURL(this, caption_id);
});

您可以使用类选择器而不是[type="file"]。为此你可以：

1. 为所有输入添加额外的课程，例如class="image-box-{{id}} your-class"，然后像$('.your-class').change(function(e){...})一样使用

或

1. 可能只是缩短您对class="image-box"所拥有的内容，因为没有理由将单个类附加到每个元素，并像$('.image-box').change(function(e){...})一样使用它。

我会删除针对每个元素重复的id="image-value"，以避免将来发生潜在错误或更改为id="image-value-{{id}}"。

Answer 2

此事件仅在具有此ID的第一个元素上注册。

$("#image-value").change(function(e){
    var caption_id = $(this).attr('data-id');
    // alert(caption_id);
    readURL(this, caption_id);
});

这就是为什么它只在第一张照片中闪现。您可以将其更改为.image-value以使其成为一个类，然后在您的html中将图像值添加为类，如：

{{#images}}

<div class="picture-caption">
    <img id="{{id}}" class="caption" src="./data/picture_caption/{{picture_caption}}" alt="your image" />
    <input data-id="{{id}}" class="image-value image-box-{{id}}" type="file" style="display: none;" value="
{{picture_caption}}" />{{id}}
</div>

{{/answers}}

脚本：

$(".image-value").change(function(e){
    var caption_id = $(this).attr('data-id');
    // alert(caption_id);
    readURL(this, caption_id);
});

我可以自由删除id属性，因为它会导致多个相同的ID。