隐藏图像上的关闭图标

Question

用例是，用户可以上传一个新的图像作为头像。为此，我使用了fileinput jQuery插件。我能够上传图片和数据库的路径，以显示它在需要的地方。

上传图像后，用户可以通过单击图像右上角的关闭图标来删除图像。

在用户删除用户图像之后，显示默认图像。我需要的是关闭图标应该不会显示时，默认的图像正在显示(用户没有上传任何图像)。在上传和删除上传的图像时，关闭图标应仅显示在图像预览中。我希望我没有弄糊涂。为此，我使用了jQuery文件输入插件。

以下是视图文件的代码。

用于文件输入的输入jQuery插件。

<div id="kv-avatar-errors-2" class="" style="position:absolute; left:80px;   top:20px;width:800px;display:none"></div>
<div class="kv-avatar" style="width:200px">
<input id="avatar-2"  name="userprofile" type="file" class="file-loading">
</div> 

这是我写的脚本。

var img = '<?php echo $user_img ?>';

    if(img)
    {
      var image = '<img src="/'+img+'" alt="Your Avatar"  style="width:100px">';
    }
    else
    {
      var image = '<img src="/uploads/profile_pics/default_avatar_male.jpg"  alt="Your Avatar" style="width:100px">';

    }
    <?php if(isset($editMode) && !empty($editMode)) {?>

      fileInput(image);

    <?php } ?>
        $('.close').click(function() {

                  var userId = '<?php echo $user_id ?>';
                  var image_path = '<?php echo $user_img ?>';

                  jQuery.ajax({
                      type: "POST",
                      url: "<?php echo site_url('Users/deleteProfileImage')  ?>",
                      data: {user_id: userId, dp: image_path},
                      dataType: 'json',
                      success: function(response) {
                      var image = '<img  src="/uploads/profile_pics/default_avatar_male.jpg" alt="Your Avatar"  style="width:100px">';
                      $(".file-default-preview").html(image);
                      document.querySelector(".close").style.display="none";

                  }
              });
          });
        });

function fileInput(image){

$("#avatar-2").fileinput({
        overwriteInitial: true,
        maxFileSize: 1500,
        showClose: true,
        showZoom: false,
        showCaption: false,
        showBrowse: false,
        browseOnZoneClick: true,
        removeLabel: '',
        removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
        removeTitle: 'Cancel or reset changes',
        elErrorContainer: '#kv-avatar-errors-2',
        msgErrorClass: 'alert alert-block alert-danger',
        defaultPreviewContent: image + '<h6 class="text-muted">Click to  select</h6>',
        layoutTemplates: {main2: '{preview} {browse}'},
        allowedFileExtensions: ["jpg", "png", "gif"]
    });

}

关闭图标的类是.close。

Answer 1

看起来好像出了什么问题：

document.querySelector(".close").style.display="none".

你可以试一试

$('.close').hide();

而不是。