Javascript Java脚本为每个图像创建唯一的类

在我的java脚本中，我可以创建一个新的表行，然后当单击img时，我的弹出窗口显示，我可以选择一个图像

问题，因为每个

如何使我的脚本
readURL（）
&addImage（）向
添加唯一的类；
html+=''；
html+=''；
html+=''；
html+=''；
$（'#images tbody'）.append（html）；
图像_行++；
}
$（文档）.ready（函数（）{
$（'body'）.popover({
选择器：“#示例“+图像”_行+”，
位置：'对'，
html:'真'，
内容：“”
});
}); 
在每个图像上分配一个唯一的id可能会更好：

<table id="images" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <td class="text-center">Image</td>
        </tr>
    </thead>
    <tbody>
        <?php $image_row = 0; ?>
        <?php $image_row++; ?>
    </tbody>
</table>

<script>

var image_row = <?php echo $image_row; ?>;

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

function addImage() {
    html  = '<tr id="image-row' + image_row + '">';
    html  += '<td>';
    html  += '<img src="" class="img-thumbnail number" id="example' + image_row + '" style="width: 100px; height:100px; cursor: pointer;">';
    html  += '</td>';
    html += '</tr>';    
    $('#images tbody').append(html);
    image_row++;
}

$(document).ready(function() {
$('body').popover({
    selector: "#example' + image_row + '",
    placement: 'right',
    html: 'true',
    content: '<span class="btn btn-primary btn-file"><i class="fa fa-pencil"></i> <input onchange="readURL(this)"  id="file-input" type="file" name="userfile[]"/></span> <button  type="button" id="button-clear" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>'

    });
}); 
</script>

你好像想用这个id把popover放在这一行上？在这种情况下，像这样更“自我约束”的东西可能会让生活更轻松？尝试将这些原则应用到代码中

注意图像上的
数据-
属性。这更多的是如何使用引导，而不是直接声明JavaScript。在
.popover（）
方法上甚至有一个
模板
选项，它可能有助于停止使用
内容
和
html:true
，这可能会出现XSS问题。然后只需将
id
作为内容传递给一个元素，您可以在
readUrl
函数中从中检索它


var-image\u行=0；
函数readURL（输入）{
var id=$（input.parent（）.prevAll（'span.popover content'）.text（）
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#示例”+id）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（“#文件输入”）.change（函数（）{
readURL（this）；
});
函数addImage（）{
html=''；
html+=''；
html+=''；
html+=''；
html+=''；
$（'#images tbody'）.append（html）；
图像_行++；
}
$（文档）.ready（函数（）{
addImage（）；
addImage（）；
addImage（）；
$（'[data toggle=“popover”]'）。popover({
模板：“”
});
});

形象
使用计数器图像\u图像的类属性中的行。如class=“img缩略图编号”+图像_row@SuchitKumar如果我在哪里做这件事最好是什么？我将如何在
$（'.number'）.attr（'src'，e.target.result）中使用它$（'.number'）.attr（'src'，e.target.result）将src设置为结果值，其中任何一个类都是number.where调用AddImages（）.I did
$（“.number'+image\u row+”）.attr（'src'，e.target.result）和这个
html+=''不知道此popover引导或jquery是哪个插件发送插件js链接。popover使用id的选择器如何？和错误引用错误：如果（img.img缩略图）{谢谢尝试，您的代码无法按我所追求的方式工作。在我使用此函数的代码上，readUrl with id
“#example'+image\u row+”
。它将只能在第一行显示图像。即
“id=”example1"
将不会获取除一个以外的任何其他生成的数字。我非常感谢您的帮助。我恐怕无法测试这一点，因为代码段安全性不允许使用它。但是，如果您可以使用
模板
选项而不是
内容
，并通过内容传入
id
，则您可以在
readUrl
函数。我尝试了
$（'[id=“example'+image_row+'“]）。attr（'src'，e.target.result）；
目前为止运气不好，无法继续使用它。请尝试我编辑的版本，我的代码中有一个错误，导致代码段无法使用输入。@mustang83抱歉，刚刚修复了另一个小问题，现在应该可以使用了
function addImage() {
    var arr = [];
    if (img.img-thumbnail) {
      $('img.img-thumbnail').each(function() {
          var id = $(this).attr('id');
          arr.push(id);
      });
      var max = Math.max.apply( null, arr );
      var i = max + 1;
    } else {
      var i = 1;
    }
    html  = '<tr id="image-row' + image_row + '">';
    html  += '<td>';
    html  += '<img src="" class="img-thumbnail" id="' + i + '" style="width: 100px; height:100px; cursor: pointer;">';
    html  += '</td>';
    html += '</tr>';    
    $('#images tbody').append(html);
    image_row++;
}

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