如何在正确的行中显示删除消息
How to display delete message in correct row
下面是一个函数,它控制文件在自己的表格行中完成上传后发生的任何事情。每个表行都包含一个文件输入,用户可以在其中上传文件,然后将文件名附加到其自己的表行中。
如果文件成功,则显示成功消息,如果上传不成功,则显示一条消息,指出存在错误。但我在函数中还有另一个功能,用户可以通过单击"删除"按钮来删除文件。我唯一的问题是这行代码:
$(".imagemsg").html(data);
假设我有 2 个表行,并且我在第一行中删除了一个文件,.imagemsg 中的消息应该只显示在第一行,因为那是删除发生的行,它不应该在第一行和第二行显示消息。
所以我的问题是我需要向$(".imagemsg").html(data);
添加什么,以便消息仅显示在文件删除的行中,而不是显示在每行的所有.imagemsg
中?
以下是完整代码:
function stopImageUpload(success, imagefilename){
var result = '';
if (success == 1){
result = '<span class="imagemsg">The file was uploaded successfully!</span><br/><br/>';
$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
}
else {
result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>';
}
$(".deletefileimage").on("click", function(event) {
var image_file_name = $(this).attr('image_file_name');
$(this).parent().remove();
jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
.done(function(data) {
$(".imagemsg").html(data);
});
});
return true;
}
回调功能:
<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script>
我听说最好这样做,但我不知道如何编码:
将相关元素传递给回调函数。你已经有 $(this(,所以你可能可以从中获取正确的行并将其放入变量中,然后在回调中访问它以将结果放在正确的位置。
更新:
function stopImageUpload(success, imagefilename){
var result = '';
var counter = 0;
counter++;
if (success == 1){
result = '<span class="imagemsg'+counter+'">The file was uploaded successfully!</span><br/><br/>';
$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
}
else {
result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>';
}
$(".deletefileimage").on("click", function(event) {
var image_file_name = $(this).attr('image_file_name');
jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
.done(function(data) {
$(".imagemsg" + counter).html(data);
});
$(this).parent().remove();
});
return true;
}
一种快速的方法是添加一个计数器,然后 .imagemsg 变为".imagemsg".$counter,然后返回的消息实际上只转到相关行 - 未经测试的代码,但你明白了。
例如
$counter++;
if (success == 1){
result = '<span class="imagemsg'.$counter.'">The file was uploaded successfully!</span><br/><br/>';
$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
}
else {
result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>';
}
$(".deletefileimage").on("click", function(event) {
var image_file_name = $(this).attr('image_file_name');
$(this).parent().remove();
jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
.done(function(data) {
$(".imagemsg".$counter).html(data);
});
如果您有多行包含类图像msg,则您的代码
$(".imagemsg").html(data);
将它加载到所有这些中
要索引,您可以尝试
$(".imagemsg").eq(0).html(data);
对于第一个
演示
或者,将class="imagemsg"
更改为 id="imagemsgN"
其中 N 递增且每行唯一。然后你更改为$("#imagemsg"+counter)
才能到达它
相关文章:
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- 如何删除在PHP中打印网页时显示的URL
- 在显示/隐藏中单击时删除的文本
- 如何在图像右上角显示删除按钮
- 删除所选/突出显示的文本
- 删除所有可拖动元素后如何显示消息
- Jquery添加更多和删除冲突并显示错误值
- jTable条件显示隐藏基于数据所有者的编辑和删除按钮
- 如何删除谷歌图表中的日期空间并更正百分比显示
- Knockoutjs:只在文本框中写入内容时显示内容,在删除数据时隐藏内容
- 删除的DOM元素仍然显示在移动safari(iOS 5.1)中
- 剑道网格隐藏/显示删除按钮
- 如何在正确的表行中显示删除消息
- 如何在正确的行中显示删除消息
- 如何在网格中显示删除时的确认框
- 如果var status = 'Processing',我如何在格式化器中显示删除按钮?
- 使用jquery更改并显示[删除/添加]基于输入文本框的可用选项
- 如何在悬停图像时显示删除选项
- 显示/删除一万个GoogleMarkers的良好做法
- JavaScript Document.Write()在空白页面中显示(删除HTML)