2020年新年大赛！

Question

Cat_In_Ears

Asked:2020-09-20 12:20:53 +0000 UTC2020-09-20 12:20:53 +0000 UTC 2020-09-20 12:20:53 +0000 UTC

jquery .hide() 方法不起作用

772

class 有一个元素label，默认情况下通过cssdisplay: none隐藏，之后在一定条件下显示，但是当我再次尝试通过它隐藏时，它不再隐藏。此外，如果您不是通过css而是通过js隐藏它（即在脚本的最开始处 write ，那么一切正常并且元素被隐藏）$('.label').hide();$('.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>

在这个 div 中，我抛出带有input类的图片image-file__added，当它们的数量超过 6 张时input，我将其隐藏以删除添加照片的能力

这里JS：

if(  $('.image-file__added').length == 5  ) {

       console.log('in if');
       $('.label').hide();

}

也就是说console.log();，它可以工作，但是元素没有隐藏，这是什么问题？

PS：代码相当广泛，所有的细微之处都无法澄清

$(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>

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

2 个回答

Voted

Ruslan Semenov · Answer 1 · 2020-09-20T14:48:22Z

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

$(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>

Cat_In_Ears · Answer 2 · 2020-09-20T14:04:36Z

Cat_In_Ears

2020-09-20T14:04:36Z2020-09-20T14:04:36Z

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

0

jquery .hide() 方法不起作用

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

jquery .hide() 方法不起作用

2 个回答

相关问题