Question

我的脚本允许用户使用AJAX上传文件，该文件显示成功消息，然后淡出。但是，如果他们上传另一个文件（上传等确实可以正常工作），该消息将不会再显示第二次。

AJAX

<script>
    $(document).ready(function() {
        $('#logo_save').click(function(){
            var image_name = $('#image_name').text();
             {
                  jQuery.ajax({
                   type: "POST",
                   url: "save_uploaded_logo.php",
                   data: 'id='+image_name,
                   cache: false,
                   success:function(response){
                       $('#new_header_preview').html(response.logo);
                       $('#logo_upload_success').html('Image Saved').fadeOut('slow');
                   }
                 });
             }
        }); 
    });
</script>

用于显示消息的表格部分

<table id="report_content_practice">
   <tr>
      <td id="upload_success" style="width:370px; vertical-align:middle">
         <span id="logo_upload_success">&nbsp;</span>
      </td>
   </tr>
</table>

Answer 1

success:function(response){
    $('#new_header_preview').html(response.logo);
    $('#logo_upload_success').fadeIn().html('Image Saved').fadeOut('slow');
}

Answer 2

正如其他人所说，原因是你的脚本第一次运行后，DOM元素被隐藏了。您需要在运行淡入淡出之前再次显示该元素，否则您尝试在具有Opacity:0的元素上运行fadeOut。

正如我在评论中所说，在调用你的fadeOut之前，在你的success函数运行show()中。

$('#logo_upload_success').html('Image Saved').show().fadeOut('slow');

Answer 3

这是因为你逐渐淡出$('#logo_upload_success')所以当你第二次加载Ajax时，这个DOM元素的不透明度设置为0，这使得无法看到新消息。

Answer 4

您的HTML已经到位，这就是您没有看到任何更改的原因。在onclick函数上，在发送ajax请求之前使html值为空：

$('#new_header_preview').html("");$('#logo_upload_success').html("");

不止一次使用Jquery fadeOut

4 个答案: