My javascript code like this :
<script type="text/javascript">
var photoList = [{id:"1", name:"hazard.jpg"}, {id:"3", name:"ronaldo.jpg"}, {id:"5", name:"messi.jpg"}];
var res = "";
for(var i = 0; i < 5; i++) {
if((photoList[i] !== undefined) && (photoList[i].id !== null)) {
res += `<li id="thumbnail-view-`+i+`">
<div class="thumbnail">
<img src="/img/products/thumbs/`+photoList[i].name+`" alt="">
<ul class="list-inline list-edit">
<li>
<a href="#" class="text-danger" id="delete-image-`+i+`"
data-toggle="modal"
data-target="#modal-delete-image-`+i+`"
data-photo='${JSON.stringify(photoList)}'
>
<span class="fa fa-trash"></span>
</a>
</li>
</ul>
</div>
</li>`;
}
else {
res += `<li id="thumbnail-upload-`+i+`">
<a href="#" class="thumbnail thumbnail-upload" id="add-image-`+i+`"
title="Add photo"
data-toggle="modal"
data-target="#modal-add-image-`+i+`"
>
<span class="fa fa-plus fa-2x"></span>
</a>
</li>`;
}
}
$('ul.list-photo').html(res);
</script>
Demo and full code like this : https://jsfiddle.net/oscar11/L6xctxze/
var photoList have dinamic data. The variable can look like this :
var photoList = [{id:"3", name:"ronaldo.jpg"}, {id:"4", name:"ozil.jpg"}, {id:"5", name:"messi.jpg"}];
The variable can look too like this :
var photoList = [{id:"1", name:"hazard.jpg"}, {id:"5", name:"messi.jpg"}];
etc. So it's dinamic
I want if the variable have id = 1, then the image is placed in box number 1. If the variable have id = 5, then the image is place in box number 5. Etc
If the variable like this :
var photoList = [{id:"1", name:"hazard.jpg"}, {id:"5", name:"messi.jpg"}];
Then the image is place in box number 1 and number 5
While in box 2, 3, 4 contains the icon +
How can I do it?
I try like above code, but it's still wrong
