javascript - 设置用户每次上传的图片背景

Question

想象一下我尝试实现这个:

用户将看到他上传完成的照片的结果，如果第一张图片存在，则附加到第二个 block ，依此类推。但是我下面的代码有缺陷，它将一张照片附加到所有 div。我的逻辑有什么问题？

$("#photo_area div").each(function(i, obj) {
  i++;
  var stopLoop = false;
  if (!$(obj).attr('style') && stopLoop == false) {
    $(obj).attr('style', 'background:url(http://example.com/' + encodeURI(data.file_name) + ') no-repeat center center');
    $('input[name="photos' + i + '"]').val(encodeURI(data.file_name));
    stopLoop = true;
  }
});

我的 DOM

<div id="photo_area">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <input type="hidden" name="photo1">
            <input type="hidden" name="photo2">
            <input type="hidden" name="photo3">
            <input type="hidden" name="photo4">
        </div>

我创建了一个示例，使用颜色作为示例:https://jsfiddle.net/m4orLzpr/

Answer 1

如果你想在列表中的图像未上传时停止循环，你可以通过写一个 else 来实现。 if 的声明条件和移动stopLoop=true;到 else陈述与感动var stopLoop=false;在循环之外。否则，没有用 stopLoop变量。