【发布时间】:2017-10-25 20:58:29
【问题描述】:
我的代码很长。我不能在这里向大家展示。我只显示javascript代码
我的 javascript 是这样的:
<script type="text/javascript">
let current = 0;
for(let i = 0; i < 5; i++) {
$('#thumbnail-view-delete-'+i).click(function(){
current -= 1;
$('input[name="photo-'+i+'"]').val('');
document.getElementById("thumbnail-view-li-"+current).style.display = "none";
document.getElementById("thumbnail-upload-li-"+current).style.display = "";
document.getElementById("thumbnail-upload-li-"+(current+1)).style.display = "none";
document.getElementById("thumbnail-slot-li-"+(current+1)).style.display = "";
});
}
var editClicked = false;
for(let i = 0; i < 5; i++) {
$('#thumbnail-view-edit-'+i).click(function(){
editClicked = true;
$('input[name="photo-'+i+'"]').click();
});
}
for(let i = 0; i < 5; i++) {
$('#thumbnail-view-add-'+i).click(function(){
editClicked = false;
$('input[name="photo-'+i+'"]').click();
});
}
for(let i = 0; i < 5; i++) {
var reader = new FileReader();
$('input[name="photo-'+i+'"]').change(function (e) {
let indexPhoto = i;
current += 1;
reader.onload = function(){
imageProducIsLoaded(indexPhoto);
};
reader.readAsDataURL(e.target.files[0]);
});
}
function imageProducIsLoaded(indexPhoto) {
$('#thumbnail-view-'+indexPhoto).attr('src', reader.result);
if (!editClicked) {
document.getElementById("thumbnail-upload-li-"+indexPhoto).style.display = "none";
document.getElementById("thumbnail-view-li-"+indexPhoto).style.display = "";
if((indexPhoto+1) < 5) {
document.getElementById("thumbnail-upload-li-"+(indexPhoto+1)).style.display = "";
document.getElementById("thumbnail-slot-li-"+(indexPhoto+1)).style.display = "none";
}
}
};
</script>
你可以在这里看到我的完整代码和演示:http://www.phpfiddle.org/main/code/adjv-sfuy
我使用 show hide 来添加、删除和编辑图像。如果你看演示,它已经工作了。图片可以编辑、删除和添加
但我的问题是当用户删除图像时
当用户删除图像时,最后一个框上的图像被删除。应该是当用户删除图像时,我单击其删除按钮的图像被删除
例如我输入 5 张图片。删除图像到 3 时,图像到 3 被删除
我这几天一直在尝试修改代码,但我没有找到解决办法
有没有人可以帮助我?
【问题讨论】:
-
我不明白你为什么不让所有的空框都显示它们的
+符号。这更简单,不会真正影响用户体验。 -
另外,如果您使用的是 jQuery,请尝试坚持使用 jquery,而不是像
document.getElementBy那样使用$("#blah")。而且您不会真正获得使用当前代码移动内容的效果,因为您只是显示/隐藏 div。 -
@A.刘,这是个好主意。但这是我的客户要求。见杰森的回答。它减少了我的问题。但仍有不足之处。
-
您是否根据 jason 的建议更新了您的代码?
-
@A.刘,还没有。我会更新的
标签: javascript php jquery html css