Java Script爲每個圖像創建獨特的類

Question

在我的java腳本中，我可以創建一個新的表格行，然後當點擊img時，我的彈出窗口顯示，我可以選擇一個圖像。

問題，因爲每當創建新行時，每個<img class ".number"是相同的，如果我從文件上傳選擇圖像預覽圖像填充所有其他img src。

我將如何能夠使我的劇本readURL() & addImage（）添加唯一的類<img class="">使得readURL()腳本功能，可以事先知情同意這個類呢？

<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> 

Answer 1

好像你正在嘗試使用編號來定位行上的彈出窗口？在這種情況下，更像這樣的「bootstrappy」可能會使生活更輕鬆？嘗試將原則應用於您的代碼。

請注意圖像上的data-屬性。這更多地是使用引導程序而不是直接聲明JavaScript。 .popover()方法中甚至有一個template選項，可能有助於停止使用可能導致XSS問題的content和html: true。然後只需將id作爲內容傳遞給您可以從readUrl函數中檢索到的元素。在用於圖像類屬性

var image_row = 0; 
 

 
function readURL(input) { 
 
    var id = $(input).parent().prevAll('span.popover-content').text() 
 
    if (input.files && input.files[0]) { 
 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
     $("#example" + id).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;" data-container="body" data-toggle="popover" data-placement="right" data-content="' + image_row + '" />'; 
 
    html += '</td>'; 
 
    html += '</tr>'; 
 
    $('#images tbody').append(html); 
 
    image_row++; 
 
} 
 

 
$(document).ready(function() { 
 
    addImage(); 
 
    addImage(); 
 
    addImage(); 
 
    $('[data-toggle="popover"]').popover({ 
 
    
 
    template: '<div class="popover" role="tooltip"><span class="popover-content" style="display:none;"></span><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></div>' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<table id="images" class="table table-striped table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <td class="text-center">Image</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

Answer 2

它可能是更好的每個圖像分配一個唯一的ID：

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

然後在readURL()選擇.img-thumbnail

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