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

Question

How do I replace a dynamic image that is generated by a loop?

The above image should look like this in html rendered by mustache templating system.

{{#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}}

I did coding and worked out only changing for the first index in the loop (which is the son guko image)

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);
});

Any ideas/alternatives I can do to implement this?

Answer 1

You have multiple input elements with same id ( id="image-value" ) that's why jQuery picks up only the first of them when executing onchange handler you binded here - $("#image-value").change(function(e){...}) .

So replace $("#image-value").change(function(e){...}) to $('[type="file"]').change(function(e){...}) like below to attach event handler to all input elements.

Check demo - 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);
});

Instead of [type="file"] you could use a class selector. For that you could:

1. add an extra class to all inputs like class="image-box-{{id}} your-class" and then use it like $('.your-class').change(function(e){...})

or

2. maybe just shorten what you have to class="image-box" , because there is no reason to attach individual class to every single element, and use it like $('.image-box').change(function(e){...}) .

And I would remove id="image-value" repeated for every element to avoid potential errors in the future or change to id="image-value-{{id}}" .

Answer 2

This event is only registered on the first element that have this id.

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

That's why it only fires in the first picture. You can change it to .image-value to make it as a class and then in your html add the image-value as class like:

{{#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}}

script:

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

I made the freedom to remove the id attribute because it will cause multiple same ids.