Jquery метод .hide()не срабатывает

148
01 августа 2021, 15:10

Есть элемент с классом label, по умолчанию он скрыт через display: none в css, после чего при определенных условиях я его отображаю, но при попытке скрыть его снова через $('.label').hide(); он уже не скрывается. При этом если скрыть его не через css, а через js (т.е в самом начале скрипта прописать $('.label').hide();, то все работает и элемент скрывается)

Вот как выглядит html: 

<div class="image-add">
   <div class="image-file__added-global clear"></div>
   <label class="label">
       <i class="fas fa-plus-circle"></i>
       <input type="file" class="file-input">
   </label>
</div>

В этот див я закидываю фотки с input'а с классом image-file__added и когда их кол-во превышает 6 штук я скрываю input, что бы убрать возможность добавления фото

Вот JS: 

if(  $('.image-file__added').length == 5  ) {
       console.log('in if');
       $('.label').hide();
}

Т.е console.log(); срабатывает, но элемент не скрывается, в чем проблема?

P.S: Код довольно обширный и все тонкости не уточнить

$(document).ready(function() { 
 
  function typeFileCheck(src) { 
    let type = src.substr(5, 5); 
    if (type == 'image') { 
      return true 
    } 
    return false 
  } 
 
  function imageGallery(input) { 
    let reader = new FileReader(); 
 
    if ($('.image-file__added').length != 6) { 
 
      reader.onload = function(e) { 
        let src = e.target.result; 
        let imageCheck = typeFileCheck(src); 
        if (imageCheck) { 
          if ($('.image-file__added-global').hasClass('clear')) { 
 
            $('.image-file__added-global').removeClass('clear'); 
 
            // добавление глобал версии 
            $('.image-added-message__error').hide(); 
            let newimage = `<img src="${src}"></img>` 
            $('.image-file__added-global').append(newimage); 
            $('.form-group').hide(); 
 
            //добавление мини версии 
            newImage = `<img src="${src}" class="image-file__added gallery-active"></img>`; 
 
            // прячем большую версию кнопки т отображаем мини 
            $('.image-add .label').before(newImage); 
            $('.image-add .label').show(); 
          } else { 
 
            $('.image-added-message__error').hide(); 
            let newImage = `<img src="${src}" class="image-file__added"></img>` 
            $('.image-add .label').before(newImage); 
            // прячем большую версию кнопки т отображаем мини 
            $('.form-group').hide(); 
            $('.image-add .label').show(); 
 
          } 
        } else { 
          $('.image-added-message__error').show(); 
        } 
      } 
 
      reader.readAsDataURL(input.files[0]); 
 
 
 
      if ($('.image-file__added').length == 5) { 
        console.log('in if'); 
        $('.label').hide(); 
      } 
 
    } else { 
      $('.image-added-message__error-full').show(); 
      setTimeout(() => { 
        $('.image-added-message__error-full').fadeOut(700) 
      }, 6000); 
    } 
  } 
 
 
  $(document).on('click', '.image-file__added', function() { 
    let $src = $(this).attr('src'); 
    $('.image-file__added-global img').attr('src', $src); 
    $('.gallery-active').removeClass('gallery-active'); 
    $(this).addClass('gallery-active'); 
  }); // end click 
 
 
  let $modal = $('.modal > .modal-body, .modal > .add-modal-bg'); 
 
  $('.add-button').click(function() { 
    $modal.show(); 
 
    $('body').css({ 
      overflow: 'hidden' 
    }); // end css 
 
  }); // end click 
 
  $('.modal-close').click(function() { 
    $modal.hide(); 
 
    $('body').css({ 
      overflow: 'auto' 
    }); // end css 
 
  }); // end click 
 
  $('.add-modal-bg').click(function() { 
    $modal.hide(); 
  }); // end click 
 
  $('.modal-name, .modal-description').on('input', function() { 
    var $this = $(this); 
    if ($this.val() == '') { 
      $this.removeClass('modal-name_filled'); 
    } else { 
      $this.addClass('modal-name_filled'); 
    } 
  }); // end on 
 
  $('.file-input').change(function(event) { 
 
    try { 
      imageGallery(this); 
    } catch { 
 
    } 
  }); // end change 
 
 
 
}); // end ready
:root { 
  box-sizing: border-box; 
} 
 
*, 
::after, 
::before { 
  box-sizing: inherit; 
} 
 
body { 
  margin: 0; 
  padding: 0; 
  font-family: Arial, sans-serif; 
  height: 200vh; 
} 
 
.head { 
  padding-top: 1em; 
  padding-bottom: 1.5em; 
  margin: 0; 
  background-color: #00021F; 
  position: relative; 
} 
 
.head-title { 
  margin: 0; 
  color: white; 
  text-align: center; 
} 
 
.head-title>span { 
  margin: 0; 
  color: yellow; 
} 
 
.fa-shopping-basket::before { 
  font-size: 2.2em; 
  color: white; 
  transition: .2s; 
} 
 
.basket { 
  position: absolute; 
  top: 1em; 
  right: 1em; 
} 
 
.basket:hover .fa-shopping-basket::before { 
  color: grey; 
  transition: .2s; 
} 
 
.basket-count { 
  display: none; 
  background-color: #DE781F; 
  color: white; 
  border-radius: 50%; 
  padding: .1em .4em; 
  font-size: 1.3em; 
  position: absolute; 
  top: -.5em; 
  left: -1em; 
} 
 
.search { 
  text-align: center; 
  margin-top: 1em; 
  position: relative; 
} 
 
.search>input { 
  width: 75%; 
  height: 2.5em; 
  border: none; 
  outline: none; 
  color: #00021F; 
  border-radius: .2em; 
  padding: 0 .5em; 
  position: relative; 
  margin-right: -.2em; 
} 
 
.fa-search::before { 
  display: none; 
  background-color: white; 
  font-size: 1.1em; 
  padding: 5px; 
  border-radius: .3em; 
  position: absolute; 
  bottom: 0; 
} 
 
 
/* placeholder style */ 
 
::-webkit-input-placeholder { 
  color: #00021F; 
} 
 
::-moz-placeholder { 
  color: #00021F; 
} 
 
 
/* Firefox 19+ */ 
 
:-moz-placeholder { 
  color: #00021F; 
} 
 
 
/* Firefox 18- */ 
 
:-ms-input-placeholder { 
  color: #00021F; 
} 
 
:focus::-webkit-input-placeholder { 
  color: transparent 
} 
 
:focus::-moz-placeholder { 
  color: transparent 
} 
 
:focus:-moz-placeholder { 
  color: transparent 
} 
 
:focus:-ms-input-placeholder { 
  color: transparent 
} 
 
.add-section { 
  position: relative; 
} 
 
.modal { 
  display: block; 
} 
 
.modal-body { 
  display: none; 
  position: fixed; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  background-color: white; 
  z-index: 2; 
  overflow: auto; 
  padding: .5em 1.5em; 
} 
 
.add-modal-bg { 
  display: none; 
  position: fixed; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 1; 
} 
 
.add-button { 
  position: fixed; 
  bottom: 0; 
  right: 0; 
  padding: 1.4em; 
  font-weight: bold; 
  border: none; 
  outline: none; 
  text-transform: uppercase; 
  background-color: #1F85DE; 
  color: white; 
  font-size: 0.875em; 
} 
 
.add-button:hover { 
  background-color: #1D7CCE; 
} 
 
.modal-close { 
  padding: 0; 
  font-size: 2.5em; 
  outline: none; 
  border: none; 
  position: absolute; 
  right: .5em; 
  top: .3em; 
  background-color: transparent; 
} 
 
.modal-cool-input { 
  box-sizing: border-box; 
  border-bottom: 2px solid #ccc; 
  width: 100%; 
  position: relative; 
  margin-top: 1em; 
  font-size: 16px; 
} 
 
textarea { 
  border-top: 10px solid black; 
  resize: none; 
  font-family: Arial, sans-serif; 
  min-width: 100%; 
} 
 
.modal-name { 
  box-sizing: border-box; 
  border: none; 
  background: none; 
  border: none; 
  width: 100%; 
  padding: 1.2em 1em 0.8em; 
  position: relative; 
  z-index: 2; 
  font-size: 1em; 
} 
 
.modal-name:focus { 
  outline: none; 
} 
 
.modal-cool-input__placeholder { 
  box-sizing: border-box; 
  border: none; 
  background: none; 
  width: 100%; 
  position: absolute; 
  z-index: 1; 
  padding-left: 1em; 
  left: 0; 
  top: 50%; 
  line-height: 1em; 
  margin-top: 0; 
  color: #777; 
  transition: all 0.2s ease; 
} 
 
.modal-name_filled+.modal-cool-input__placeholder, 
.modal-name:focus+.modal-cool-input__placeholder, 
.modal-description_filled+.modal-cool-input__placeholder, 
.modal-description:focus+.modal-cool-input__placeholder { 
  font-size: 0.8em; 
  top: 0; 
  z-index: 2; 
} 
 
.modal-description { 
  width: 80%; 
  height: 7.5em; 
  overflow: auto; 
  border: none; 
  z-index: 2; 
  position: relative; 
  background-color: transparent; 
  border-top: 15px solid white; 
  outline: none; 
} 
 
.image-file__added { 
  width: 90px; 
} 
 
.form-group { 
  padding: 1em; 
  margin: 1em; 
} 
 
input[type=file] { 
  outline: 0; 
  opacity: 0; 
  pointer-events: none; 
  user-select: none; 
} 
 
.label { 
  width: 120px; 
  border: 2px dashed grey; 
  border-radius: 5px; 
  display: block; 
  padding: 1.2em; 
  transition: border 300ms ease; 
  cursor: pointer; 
  text-align: center; 
  margin: 0; 
} 
 
.label i { 
  display: block; 
  font-size: 42px; 
  padding-bottom: 16px; 
} 
 
.label i, 
.label .file-title { 
  color: grey; 
  font-weight: bold; 
  transition: 200ms color; 
} 
 
.label:hover { 
  border: 2px solid #000; 
} 
 
.label:hover i, 
.label:hover .file-title { 
  color: #000; 
} 
 
.form-group { 
  display: flex; 
  justify-content: center; 
} 
 
.file-title .file-title-descr { 
  font-size: .6em; 
} 
 
.image-added-message__error, 
.image-added-message__error-full { 
  color: red; 
  display: none; 
  font-size: 1.5em; 
  font-weight: bold; 
} 
 
.image-file__added { 
  width: 30%; 
  max-width: 10em; 
  min-width: 4em; 
  height: 6em; 
  margin: .2em; 
} 
 
.image-add { 
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
} 
 
.image-file__added-global { 
  width: 100%; 
  max-height: 18em; 
  display: flex; 
  justify-content: center; 
} 
 
.image-file__added-global img { 
  width: 20em; 
} 
 
.image-add .label { 
  display: none; 
  max-width: 6.3em; 
  max-height: 6.3em; 
  margin: .1em; 
} 
 
.label .fas { 
  padding: .2em; 
} 
 
.gallery-active { 
  border: 4px solid red; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<header class="head"> 
  <h1 class="head-title"><span>Lieti</span>Shops</h1> 
 
  <div class="basket"> 
    <span class="basket-count"></span> 
    <i class="fas fa-shopping-basket"></i> 
  </div> 
 
  <div class="search"> 
    <input type="text" name="search-input" placeholder="Поиск по товарам"> 
    <i class="fas fa-search"></i> 
  </div> 
</header> 
 
<main> 
  <section class="add-section"> 
    <button type="button" name="add-button" class="add-button">+ Добавить товар</button> 
    <div class="modal"> 
      <div class="modal-body"> 
        <button type="button" name="close-button" class="modal-close">&times;</button> 
        <h2 class="modal-title">Добавить товар</h2> 
 
        <div class="image-add"> 
          <div class="image-file__added-global clear"></div> 
          <label class="label"> 
                            <i class="fas fa-plus-circle"></i> 
                            <input type="file" class="file-input"> 
                        </label> 
        </div> 
 
        <div class="form-group"> 
          <label class="label"> 
                            <i class="far fa-file-image"></i> 
                            <span class="file-title">Добавте фото</span> 
                            <input type="file" class="file-input"> 
                        </label> 
        </div> 
 
        <div class="error-image-message-pack"> 
          <span class="image-added-message__error">Не удалось загрузить изображение</span> 
          <span class="image-added-message__error-full">Можно загрузить только 6 изображений :(</span> 
        </div> 
 
        <div class="modal-cool-input"> 
          <input type="text" class="modal-name" placeholder=""> 
          <span class="modal-cool-input__placeholder">Название</span> 
        </div> 
 
        <div class="modal-cool-input"> 
          <textarea name="description" class="modal-description" placeholder=""></textarea> 
          <span class="modal-cool-input__placeholder modal-cool__placeholder-bgc">Описание</span> 
        </div> 
 
      </div> 
      <div class="add-modal-bg"></div> 
    </div> 
  </section> 
</main>

Сайт на данный момент на мобильные устройства так, что открывайте в узком окне, если не хотите кровь из глаз :) Так же там не подгружены иконки, но суть понятна

Answer 1

Нет, не верный вывод. Все у вас работает, и форма прячется но вы ей даете команду ее снова показать, поэтому вынесите проверку в отдельную функцию и проверяйте по окончанию загрузки, не стоит вешать таймер, время загрузки зависит от размера файла и интернета

$(document).ready(function() { 
 
  function checkCount(count) { 
    if ($('.image-file__added').length == count) { 
      console.log('in if'); 
      $('.label').hide(); 
    } else { 
      $('.label').show(); 
    } 
 
  } 
 
  function typeFileCheck(src) { 
    let type = src.substr(5, 5); 
    if (type == 'image') { 
      return true 
    } 
    return false 
  } 
 
  function imageGallery(input) { 
    let reader = new FileReader(); 
 
    if ($('.image-file__added').length != 6) { 
 
      reader.onload = function(e) { 
        let src = e.target.result; 
        let imageCheck = typeFileCheck(src); 
        if (imageCheck) { 
          if ($('.image-file__added-global').hasClass('clear')) { 
 
            $('.image-file__added-global').removeClass('clear'); 
 
            // добавление глобал версии 
            $('.image-added-message__error').hide(); 
            let newimage = `<img src="${src}"></img>` 
            $('.image-file__added-global').append(newimage); 
            $('.form-group').hide(); 
 
            //добавление мини версии 
            newImage = `<img src="${src}" class="image-file__added gallery-active"></img>`; 
 
            // прячем большую версию кнопки т отображаем мини 
            $('.image-add .label').before(newImage); 
            checkCount(2); 
          } else { 
 
            $('.image-added-message__error').hide(); 
            let newImage = `<img src="${src}" class="image-file__added"></img>` 
            $('.image-add .label').before(newImage); 
            // прячем большую версию кнопки т отображаем мини 
            $('.form-group').hide(); 
            checkCount(2); 
 
          } 
        } else { 
          $('.image-added-message__error').show(); 
        } 
      } 
 
      reader.readAsDataURL(input.files[0]); 
 
    } else { 
      $('.image-added-message__error-full').show(); 
      setTimeout(() => { 
        $('.image-added-message__error-full').fadeOut(700) 
      }, 6000); 
    } 
  } 
 
 
  $(document).on('click', '.image-file__added', function() { 
    let $src = $(this).attr('src'); 
    $('.image-file__added-global img').attr('src', $src); 
    $('.gallery-active').removeClass('gallery-active'); 
    $(this).addClass('gallery-active'); 
  }); // end click 
 
 
  let $modal = $('.modal > .modal-body, .modal > .add-modal-bg'); 
 
  $('.add-button').click(function() { 
    $modal.show(); 
 
    $('body').css({ 
      overflow: 'hidden' 
    }); // end css 
 
  }); // end click 
 
  $('.modal-close').click(function() { 
    $modal.hide(); 
 
    $('body').css({ 
      overflow: 'auto' 
    }); // end css 
 
  }); // end click 
 
  $('.add-modal-bg').click(function() { 
    $modal.hide(); 
  }); // end click 
 
  $('.modal-name, .modal-description').on('input', function() { 
    var $this = $(this); 
    if ($this.val() == '') { 
      $this.removeClass('modal-name_filled'); 
    } else { 
      $this.addClass('modal-name_filled'); 
    } 
  }); // end on 
 
  $('.file-input').change(function(event) { 
 
    try { 
      imageGallery(this); 
    } catch { 
 
    } 
  }); // end change 
 
 
 
}); // end ready
:root { 
  box-sizing: border-box; 
} 
 
*, 
::after, 
::before { 
  box-sizing: inherit; 
} 
 
body { 
  margin: 0; 
  padding: 0; 
  font-family: Arial, sans-serif; 
  height: 200vh; 
} 
 
.head { 
  padding-top: 1em; 
  padding-bottom: 1.5em; 
  margin: 0; 
  background-color: #00021F; 
  position: relative; 
} 
 
.head-title { 
  margin: 0; 
  color: white; 
  text-align: center; 
} 
 
.head-title>span { 
  margin: 0; 
  color: yellow; 
} 
 
.fa-shopping-basket::before { 
  font-size: 2.2em; 
  color: white; 
  transition: .2s; 
} 
 
.basket { 
  position: absolute; 
  top: 1em; 
  right: 1em; 
} 
 
.basket:hover .fa-shopping-basket::before { 
  color: grey; 
  transition: .2s; 
} 
 
.basket-count { 
  display: none; 
  background-color: #DE781F; 
  color: white; 
  border-radius: 50%; 
  padding: .1em .4em; 
  font-size: 1.3em; 
  position: absolute; 
  top: -.5em; 
  left: -1em; 
} 
 
.search { 
  text-align: center; 
  margin-top: 1em; 
  position: relative; 
} 
 
.search>input { 
  width: 75%; 
  height: 2.5em; 
  border: none; 
  outline: none; 
  color: #00021F; 
  border-radius: .2em; 
  padding: 0 .5em; 
  position: relative; 
  margin-right: -.2em; 
} 
 
.fa-search::before { 
  display: none; 
  background-color: white; 
  font-size: 1.1em; 
  padding: 5px; 
  border-radius: .3em; 
  position: absolute; 
  bottom: 0; 
} 
 
 
/* placeholder style */ 
 
::-webkit-input-placeholder { 
  color: #00021F; 
} 
 
::-moz-placeholder { 
  color: #00021F; 
} 
 
 
/* Firefox 19+ */ 
 
:-moz-placeholder { 
  color: #00021F; 
} 
 
 
/* Firefox 18- */ 
 
:-ms-input-placeholder { 
  color: #00021F; 
} 
 
:focus::-webkit-input-placeholder { 
  color: transparent 
} 
 
:focus::-moz-placeholder { 
  color: transparent 
} 
 
:focus:-moz-placeholder { 
  color: transparent 
} 
 
:focus:-ms-input-placeholder { 
  color: transparent 
} 
 
.add-section { 
  position: relative; 
} 
 
.modal { 
  display: block; 
} 
 
.modal-body { 
  display: none; 
  position: fixed; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  background-color: white; 
  z-index: 2; 
  overflow: auto; 
  padding: .5em 1.5em; 
} 
 
.add-modal-bg { 
  display: none; 
  position: fixed; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 1; 
} 
 
.add-button { 
  position: fixed; 
  bottom: 0; 
  right: 0; 
  padding: 1.4em; 
  font-weight: bold; 
  border: none; 
  outline: none; 
  text-transform: uppercase; 
  background-color: #1F85DE; 
  color: white; 
  font-size: 0.875em; 
} 
 
.add-button:hover { 
  background-color: #1D7CCE; 
} 
 
.modal-close { 
  padding: 0; 
  font-size: 2.5em; 
  outline: none; 
  border: none; 
  position: absolute; 
  right: .5em; 
  top: .3em; 
  background-color: transparent; 
} 
 
.modal-cool-input { 
  box-sizing: border-box; 
  border-bottom: 2px solid #ccc; 
  width: 100%; 
  position: relative; 
  margin-top: 1em; 
  font-size: 16px; 
} 
 
textarea { 
  border-top: 10px solid black; 
  resize: none; 
  font-family: Arial, sans-serif; 
  min-width: 100%; 
} 
 
.modal-name { 
  box-sizing: border-box; 
  border: none; 
  background: none; 
  border: none; 
  width: 100%; 
  padding: 1.2em 1em 0.8em; 
  position: relative; 
  z-index: 2; 
  font-size: 1em; 
} 
 
.modal-name:focus { 
  outline: none; 
} 
 
.modal-cool-input__placeholder { 
  box-sizing: border-box; 
  border: none; 
  background: none; 
  width: 100%; 
  position: absolute; 
  z-index: 1; 
  padding-left: 1em; 
  left: 0; 
  top: 50%; 
  line-height: 1em; 
  margin-top: 0; 
  color: #777; 
  transition: all 0.2s ease; 
} 
 
.modal-name_filled+.modal-cool-input__placeholder, 
.modal-name:focus+.modal-cool-input__placeholder, 
.modal-description_filled+.modal-cool-input__placeholder, 
.modal-description:focus+.modal-cool-input__placeholder { 
  font-size: 0.8em; 
  top: 0; 
  z-index: 2; 
} 
 
.modal-description { 
  width: 80%; 
  height: 7.5em; 
  overflow: auto; 
  border: none; 
  z-index: 2; 
  position: relative; 
  background-color: transparent; 
  border-top: 15px solid white; 
  outline: none; 
} 
 
.image-file__added { 
  width: 90px; 
} 
 
.form-group { 
  padding: 1em; 
  margin: 1em; 
} 
 
input[type=file] { 
  outline: 0; 
  opacity: 0; 
  pointer-events: none; 
  user-select: none; 
} 
 
.label { 
  width: 120px; 
  border: 2px dashed grey; 
  border-radius: 5px; 
  display: block; 
  padding: 1.2em; 
  transition: border 300ms ease; 
  cursor: pointer; 
  text-align: center; 
  margin: 0; 
} 
 
.label i { 
  display: block; 
  font-size: 42px; 
  padding-bottom: 16px; 
} 
 
.label i, 
.label .file-title { 
  color: grey; 
  font-weight: bold; 
  transition: 200ms color; 
} 
 
.label:hover { 
  border: 2px solid #000; 
} 
 
.label:hover i, 
.label:hover .file-title { 
  color: #000; 
} 
 
.form-group { 
  display: flex; 
  justify-content: center; 
} 
 
.file-title .file-title-descr { 
  font-size: .6em; 
} 
 
.image-added-message__error, 
.image-added-message__error-full { 
  color: red; 
  display: none; 
  font-size: 1.5em; 
  font-weight: bold; 
} 
 
.image-file__added { 
  width: 30%; 
  max-width: 10em; 
  min-width: 4em; 
  height: 6em; 
  margin: .2em; 
} 
 
.image-add { 
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
} 
 
.image-file__added-global { 
  width: 100%; 
  max-height: 18em; 
  display: flex; 
  justify-content: center; 
} 
 
.image-file__added-global img { 
  width: 20em; 
} 
 
.image-add .label { 
  display: none; 
  max-width: 6.3em; 
  max-height: 6.3em; 
  margin: .1em; 
} 
 
.label .fas { 
  padding: .2em; 
} 
 
.gallery-active { 
  border: 4px solid red; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<header class="head"> 
  <h1 class="head-title"><span>Lieti</span>Shops</h1> 
 
  <div class="basket"> 
    <span class="basket-count"></span> 
    <i class="fas fa-shopping-basket"></i> 
  </div> 
 
  <div class="search"> 
    <input type="text" name="search-input" placeholder="Поиск по товарам"> 
    <i class="fas fa-search"></i> 
  </div> 
</header> 
 
<main> 
  <section class="add-section"> 
    <button type="button" name="add-button" class="add-button">+ Добавить товар</button> 
    <div class="modal"> 
      <div class="modal-body"> 
        <button type="button" name="close-button" class="modal-close">&times;</button> 
        <h2 class="modal-title">Добавить товар</h2> 
 
        <div class="image-add"> 
          <div class="image-file__added-global clear"></div> 
          <label class="label"> 
                            <i class="fas fa-plus-circle"></i> 
                            <input type="file" class="file-input"> 
                        </label> 
        </div> 
 
        <div class="form-group"> 
          <label class="label"> 
                            <i class="far fa-file-image"></i> 
                            <span class="file-title">Добавте фото</span> 
                            <input type="file" class="file-input"> 
                        </label> 
        </div> 
 
        <div class="error-image-message-pack"> 
          <span class="image-added-message__error">Не удалось загрузить изображение</span> 
          <span class="image-added-message__error-full">Можно загрузить только 6 изображений :(</span> 
        </div> 
 
        <div class="modal-cool-input"> 
          <input type="text" class="modal-name" placeholder=""> 
          <span class="modal-cool-input__placeholder">Название</span> 
        </div> 
 
        <div class="modal-cool-input"> 
          <textarea name="description" class="modal-description" placeholder=""></textarea> 
          <span class="modal-cool-input__placeholder modal-cool__placeholder-bgc">Описание</span> 
        </div> 
 
      </div> 
      <div class="add-modal-bg"></div> 
    </div> 
  </section> 
</main>

Answer 2

Нашёл ответ, если поместить $('.label').hide(); в setTimeout, например, на 10 мс, то всё работает. Предполагаю, что дело в том, что пока картинка обрабатывается input'ом, то она как бы "неприкосновенная", и с ней нельзя выполнить никакие операции, поэтому надо было помещать $('.label').hide(); внутрь события .onload

READ ALSO
Менять область видимости блока при клике на кнопку
HTML

Менять область видимости блока при клике на кнопку

Есть очень длинная форма в модальном окне, разделенная на 3 части, видимой должна быть только одна из частей, а по клику на кнопку "далее", нужно...

 252
Функция для заливки ячейки выбранным цветом
HTML

Функция для заливки ячейки выбранным цветом

Суть в том, чтобы можно было выбрать цвет из имеющихся ячеек и закрасить этим цветом любую ячейку из таблицы

 121
Проблема с вводом данных с файла в C#e
c#

Проблема с вводом данных с файла в C#e

Необходимо доработать программу, чтобы она могла работать с вводом данных через файлВ С# новичок, поэтому не знаком, возможно ли это сделать...

 132
Мониторинг пинга сервера
c#

Мониторинг пинга сервера

Хочу сделать маленький tool для мониторинга статуса сервера своего

 154