Длина элемента с классом hidden

251
26 сентября 2017, 08:44

Столкнулся с непониманием того, какая высота у элементов с dislpay: none;

Приведу пример из работы:

// Button what add slide effect for product characteristics 
 
function hideButtonsMoreCharacteristicsIfWeHaveBitChatacteristics() { 
 
  $(".main-descript-tab__fullTab").each(function(index, el) { 
    // var heightField =; 
    var innerHeight = el.scrollHeight; 
    console.log($(".main-descript-tab").height() + " = heightField"); 
 
    if (((el.scrollHeight < $(".main-descript-tab").height()) && (el.scrollHeight !== 0))) { 
 
      // console.log(innerHeight + " = innerHeight"); 
      $(this).parent(".main-descript-tab").siblings(".main-desc__showMoreInfo").addClass("hidden"); 
      $(this).parent(".main-descript-tab").css("height", "auto"); 
    } 
 
  }); 
 
} 
hideButtonsMoreCharacteristicsIfWeHaveBitChatacteristics(); 
 
 
 
 
function switchMainDescription() { 
  var mainDescriptionItem = $(".main-desc-title__item"), 
    mainDescriptionContent = $(".main-desc__item"), 
    active = "active"; 
 
  mainDescriptionItem.on("click", function() { 
    mainDescriptionItem.removeClass(active); 
    $(this).addClass("active"); 
    var index = $('.main-desc-title__item.active').index(); 
 
    mainDescriptionContent.removeClass(active); 
    mainDescriptionContent.eq(index).addClass(active); 
 
    hideButtonsMoreCharacteristicsIfWeHaveBitChatacteristics(); 
 
  }); 
 
} 
switchMainDescription(); 
 
 
 
 
 
 
 
function showMoreCharacteristics() { // Slide effect 
 
  var buttonMoreInformation = $(".main-desc__showMoreInfo"), 
    fieldDescriptionActive = "main-descript-tab_active", 
    textShowInfo = ".main-desc__showMoreInfo_show", 
    textHideInfo = ".main-desc__showMoreInfo_hide"; 
 
  buttonMoreInformation.on("click", function() { 
 
    $(this).siblings(".main-descript-tab").toggleClass(fieldDescriptionActive); 
    $(this).children(textHideInfo).toggleClass("hidden"); 
    $(this).children(textShowInfo).toggleClass("hidden"); 
 
  }) 
} 
showMoreCharacteristics(); 
 
 
 
 
 
//   FORM Review 
 
var buttonAddComment = $(".code_addReview"), 
  formReview = $(".code_formRewiew"); 
 
buttonAddComment.on("click", function() { 
 
  $(this).hide(); 
  formReview.slideDown(600); 
 
});
ul { 
  list-style-type: none; 
} 
 
#form-review { 
  display: none; 
} 
 
.card-main-desc-wrap { 
  margin-bottom: 5px; 
} 
 
.min-title { 
  font-size: 24px; 
  font-weight: 600; 
} 
 
.product-line__title { 
  margin-bottom: 35px; 
} 
 
.products_related, 
.products_looked { 
  width: 100%; 
  margin: 0 16px; 
} 
 
.good-price { 
  display: inline-block; 
} 
 
.goods-item-slid .good-price__hist { 
  font-size: 14px; 
} 
 
.goods-item-slid .good-price__yy, 
.goods-item-slid .good-price__nom { 
  font-size: 16px; 
  -webkit-transform-origin: 100% 100%; 
  -ms-transform-origin: 100% 100%; 
  transform-origin: 100% 100%; 
} 
 
.goods-item-slid .good-price__hist { 
  margin-right: 10px; 
} 
 
.goods-item-slid .good-price__hist:before { 
  bottom: 0.35em; 
} 
 
.goods-item-slid__title { 
  overflow: hidden; 
  height: 32px; 
  margin-bottom: 12px; 
} 
 
.goods-item-slid__price { 
  margin-bottom: 12px; 
} 
 
.name-product { 
  font-size: 14px; 
  text-align: center; 
  line-height: 1.2; 
  display: block; 
} 
 
.main-page__product-line { 
  padding-bottom: 40px; 
} 
 
.goods-item-slid__img { 
  padding-bottom: 100%; 
  position: relative; 
  margin-bottom: 12px; 
} 
 
.goods-item-slid__pic { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  left: 0; 
  top: 0; 
} 
 
.product-line__item { 
  margin-bottom: 35px; 
} 
 
.product-line__item:nth-last-of-type(1) { 
  margin-bottom: 0 !important; 
} 
 
#cart .dropdown-menu { 
  min-width: initial; 
} 
 
.list-group { 
  border: none; 
  box-shadow: none; 
} 
 
.list-group-item { 
  padding: 0; 
  border: none; 
  background-color: transparent; 
} 
 
.list-group a { 
  border: none; 
  padding: 0; 
} 
 
.list-group a:hover { 
  color: #ff4e54; 
  border: none; 
  background: none; 
  box-shadow: none; 
} 
 
.panel-default>.panel-heading { 
  background: none; 
  border: none; 
} 
 
.panel { 
  box-shadow: none; 
  background: none; 
  border: none; 
} 
 
.panel-default { 
  border: none; 
} 
 
.tab-desc { 
  display: none; 
} 
 
.tab-desc.active { 
  display: block; 
} 
 
.info-desc-text__item { 
  padding: 20px; 
} 
 
.descript-tab { 
  width: 100%; 
  min-height: 150px; 
  font-size: 14px; 
  line-height: 1.2; 
} 
 
.descript-tab>* { 
  margin-bottom: 20px; 
} 
 
.descript-tab>*:last-child { 
  margin: 0; 
} 
 
.main-desc-title { 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  border-bottom: 2px solid #ff4e54; 
} 
 
.main-desc-title__item { 
  font-size: 20px; 
  width: 260px; 
  text-align: center; 
  padding: 12px; 
  background-color: #f4f4f4; 
  margin-right: 2px; 
  cursor: pointer; 
} 
 
.main-desc-title__item:last-child { 
  margin-right: 0; 
} 
 
.main-desc-title__item.active { 
  background-color: #ff4e54; 
  color: #fff; 
} 
 
.main-desc__item { 
  padding: 20px; 
} 
 
.main__card-product { 
  margin-bottom: 10px; 
} 
 
.main__card-product:after { 
  content: ''; 
  display: table; 
  clear: both; 
} 
 
.card-product__galery { 
  float: left; 
} 
 
.main-descript-tab { 
  position: relative; 
  display: block; 
  width: 100%; 
  height: 228px; 
  overflow: hidden; 
} 
 
.main-descript-tab_active { 
  height: auto !important; 
} 
 
.main-descript-tab p { 
  margin-top: 5px; 
  font-size: 16px; 
} 
 
.main-descript-tab li { 
  padding: 8px 30px 8px 40px; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
  font-size: 16px; 
} 
 
.main-descript-tab li:nth-child(odd) { 
  background-color: #f4f4f4; 
} 
 
.main-descript-tab li span { 
  -webkit-flex: 1; 
  -ms-flex: 1; 
  flex: 1; 
  max-width: 180px; 
  margin-right: 40px; 
} 
 
.main-descript-tab li span:last-child { 
  margin-right: 0; 
  max-width: 100%; 
} 
 
.main-desc__showMoreInfo { 
  display: block; 
  position: relative; 
  width: 260px; 
  margin-top: 6px; 
  padding: 10px 10px 10px 30px; 
  color: #fff; 
  background-color: #ff4e54; 
} 
 
.main-desc__showMoreInfo_show { 
  margin-left: -18px; 
} 
 
.main-desc__showMoreInfo_show:after { 
  position: absolute; 
  top: 10px; 
  right: 6px; 
  content: "\f103"; 
  font-family: "FontAwesome"; 
  font-size: 15px; 
  color: inherit; 
} 
 
.main-desc__showMoreInfo_hide:after { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  content: "\f00d"; 
  font-family: "FontAwesome"; 
  font-size: 15px; 
  color: inherit; 
} 
 
.bl_review { 
  height: 100%; 
  margin-top: 10px; 
  margin-left: 10px; 
  border-left: 1px solid #ff4e54; 
} 
 
.review_item { 
  margin-top: 10px; 
  width: 100%; 
  padding: 10px; 
  box-sizing: border-box; 
  border-left: 1px solid #ff4e54; 
} 
 
.review_item__userName { 
  display: inline-block; 
  padding-bottom: 4px; 
  border-bottom: 2px solid #ff4e54; 
  font-family: TahomaBold, sans-serif; 
  color: #333; 
  font-size: 18px; 
} 
 
.review_item__time { 
  float: right; 
  display: inline-block; 
} 
 
.review_item__raiting { 
  margin-top: 10px; 
  text-decoration: underline; 
} 
 
.personal-form-review { 
  clear: both; 
  margin-top: 15px; 
} 
 
.review_item__fullReview { 
  margin-top: 10px; 
} 
 
.review_product { 
  width: 100%; 
  margin: 24px auto; 
  text-align: center; 
} 
 
.review_product__title { 
  display: inline; 
  font-family: "Tahoma", sans-serif; 
  font-size: 24px; 
} 
 
.review_product__title__bold { 
  font-family: TahomaBold, sans-serif; 
} 
 
.bl_raiting__chackbox { 
  position: absolute; 
  visibility: hidden; 
} 
 
.my_button-review { 
  clear: both; 
  margin-top: 10px; 
  padding: 10px; 
  border-radius: 4px; 
  color: #fff; 
  background-color: #ff4e54; 
} 
 
.my_button-review:hover { 
  color: #fff; 
  text-decoration: underline; 
} 
 
.main-desc__showMoreInfo { 
  display: block; 
  position: relative; 
  width: 260px; 
  margin-top: 6px; 
  padding: 10px 10px 10px 30px; 
  color: #fff; 
  background-color: #ff4e54; 
} 
 
.main-desc__showMoreInfo_show { 
  margin-left: -18px; 
} 
 
.main-desc__showMoreInfo_show:after { 
  position: absolute; 
  top: 10px; 
  right: 6px; 
  content: "\f103"; 
  font-family: "FontAwesome"; 
  font-size: 15px; 
  color: inherit; 
} 
 
.main-desc__showMoreInfo_hide:after { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  content: "\f00d"; 
  font-family: "FontAwesome"; 
  font-size: 15px; 
  color: inherit; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<div class="card-main-desc-wrap"> 
  <div class="main-desc  tab-wrap"> 
    <ul class="main-desc-title"> 
      <li class="main-desc-title__item  tab-title  "> 
        Описание 
      </li> 
 
      <li class="main-desc-title__item  tab-title active"> 
        Характеристики 
      </li> 
 
      <li class="main-desc-title__item  tab-title "> 
        Отзывы 
      </li> 
    </ul> 
 
    <div class="main-desc-text"> 
      <div class="main-desc__item  tab-desc "> 
        <div class="wrapperBlock"> 
          <div class="main-descript-tab "> 
            <div class="main-descript-tab__fullTab"> 
 
 
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quia?</p> 
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quia? Lorem ipsum dolor sit amet.</p> 
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus illo impedit modi molestias, recusandae.</p> 
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, nulla?</p> 
 
            </div> 
          </div> 
 
          <button class="main-desc__showMoreInfo"> 
                                <span class="main-desc__showMoreInfo_show">Показать больше информации</span> 
                                <span class="main-desc__showMoreInfo_hide hidden">Скрыть информацию</span> 
                            </button> 
        </div> 
      </div> 
 
      <div class="main-desc__item  tab-desc active"> 
        <div class="wrapperBlock"> 
 
 
          <div class="main-descript-tab"> 
            <ul class="main-descript-tab__fullTab"> 
              <li> 
                <span>Страна производитель:</span> 
                <span>Украина</span> 
              </li> 
 
              <li> 
                <span>Материал</span> 
                <span>натуральная кожа</span> 
              </li> 
 
              <li> 
                <span>Код производителя:</span> 
                <span>170550-BM</span> 
              </li> 
 
 
            </ul> 
          </div> 
          <button class="main-desc__showMoreInfo"> 
                                <span class="main-desc__showMoreInfo_show">Показать больше информации</span> 
                                <span class="main-desc__showMoreInfo_hide hidden">Скрыть информацию</span> 
                            </button> 
        </div> 
      </div> 
 
      <div class="main-desc__item  tab-desc " id="tab-review"> 
 
 
        <div class="main-descript-tab"> 
          <div class="main-descript-tab__fullTab"> 
            <div id="review" class="hidden"> 
              <p>У данного товара пока нету отзывов, будь первым 
              </p> 
            </div> 
 
            <div class="review_item"> 
              <p class="review_item__userName">User Name</p> 
              <time class="review_item__time">01.08.2017</time> 
              <p class="review_item__raiting"><span>Рейтинг пользователя</span> 
                <span>4</span><span>/5</span></p> 
              <p class="review_item__fullReview"> 
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consectetur eos laborum magni quam quod ratione repudiandae suscipit tempora veniam! Aspernatur, atque corporis dignissimos minima nam officia provident quasi quia!</span> 
                <span>Alias, amet autem cum cumque delectus, deleniti dignissimos doloribus dolorum facilis illum incidunt iure iusto, laboriosam laborum maxime minus natus necessitatibus perspiciatis quaerat quis repellendus saepe sed similique suscipit unde!</span> 
              </p> 
            </div> 
 
          </div> 
        </div> 
 
        <button class="main-desc__showMoreInfo"> 
                                <span class="main-desc__showMoreInfo_show">Показать больше информации</span> 
                                <span class="main-desc__showMoreInfo_hide hidden">Скрыть информацию</span> 
                            </button> 
 
 
        <button class="my_button-review code_addReview"> 
                                <span class="button_review">Оставить отзыв о товаре</span> 
                                <i class="fa fa-bookmark" aria-hidden="true"></i> 
                            </button> 
 
 
 
        <form class="form-horizontal personal-form-review code_formRewiew" id="form-review"> 
 
          <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> Пожалуйста, выберите оценку товара! 
          </div> 
          <div class="col-xs-12 review_product"> 
            <p class="review_product__title">Написать отзыв о</p> 
            <h2 class="review_product__title review_product__title__bold">Женская сумка Karfei 1710078-04A черная</h2> 
          </div> 
 
          <div class="form-group required review_form clearfix"> 
            <div class="col-sm-6"> 
              <input class="form-control review_name" type="text" name="name" value="" placeholder="*Ваше имя:"> 
            </div> 
            <div class="col-sm-6"> 
              <input class="form-control review_email" type="email" name="name" value="" placeholder="Email:"> 
            </div> 
            <div class="col-sm-6"> 
              <input class="form-control review_telephone" type="tel" name="name" value="" placeholder="Ваш телефон:"> 
            </div> 
 
            <div class="col-sm-6"> 
              <div class="bl_review__raiting"> 
                <span class="review_text">Оценить товар</span> 
 
                <div class="bl_review__raitingFull"> 
                  <input class="bl_raiting__chackbox" id="review_star5" type="radio" name="raiting" value="5"> 
                  <label class="bl_raiting__label" for="review_star5"></label> 
 
                  <input class="bl_raiting__chackbox" id="review_star4" type="radio" name="raiting" value="4"> 
                  <label class="bl_raiting__label" for="review_star4"></label> 
 
                  <input class="bl_raiting__chackbox" id="review_star3" type="radio" name="raiting" value="3"> 
                  <label class="bl_raiting__label" for="review_star3"></label> 
 
                  <input class="bl_raiting__chackbox" id="review_star2" type="radio" name="raiting" value="2"> 
                  <label class="bl_raiting__label" for="review_star2"></label> 
 
                  <input class="bl_raiting__chackbox" id="review_star1" type="radio" name="raiting" value="1"> 
                  <label class="bl_raiting__label" for="review_star1"></label> 
                </div> 
              </div> 
 
 
            </div> 
          </div> 
          <div class="form-group required"> 
            <div class="col-sm-12"> 
              <textarea class="form-control review_textarea" name="text" rows="5" id="input-review" placeholder="Текст сообщения"></textarea> 
            </div> 
          </div> 
 
          <button class="button_lim clearfix" type="button" id="button-review" data-loading-text="Загрузка..."> 
                                <span class="button_lim__text">Отправить</span> 
                            </button> 
 
        </form> 
      </div> 
    </div> 
  </div> 
</div>

https://jsfiddle.net/v92g2bdj/1/ Есть 3 переключалки Описание Характеристики и Отзывы. Стоит задача - выводить кнопку Показать больше информации только если контента в данной рубрике наберется >=228px (за это отвечает класс обертка .main-descript-tab) Собственно все действие у меня выполняет функция hideButtonsMoreCharacteristicsIfWeHaveBitChatacteristics(); Она срабатывает первый раз при загрузке страници, а второй при клацанье на нужную рубрику. Собственно баг - Первоначально активирована рубрика Характеристики, и если дальше зайти в Отзывы, то функция отработает правильно. Но если изначально зайти в Описание а потом в Отзывы, то всё ломается (оно выводит кнопку Показать больше информации, хотя контента там столько нету ).

В консоль я вывожу длинны элементов. В первом случае оно отрабатывает верно. Во втором длинны уходят в ноль и функция не отрабатывает. Подскажите пожалуйста как исправить?

Answer 1

$(".main-descript-tab") возвращает массив.

Попробуйте это:

if((( el.scrollHeight <  $(".main-descript-tab").height()) && ( el.scrollHeight !== 0))){

Заменить на:

if((( el.scrollHeight <=  $(this).parent().height()) && ( el.scrollHeight !== 0))){
READ ALSO
JavaScript, проблема с SetInterval

JavaScript, проблема с SetInterval

Подскажите, почему без if-а таймер работает нормально, а с ним - вообще не запускается?

301
Клик на мобильном устройстве

Клик на мобильном устройстве

Данный код обрабатывает клик на компьютере, но не обрабатывает клик на телефонеКак его адаптировать, чтобы клик отслеживался на телефоне?

333
Использование IF со style.backgroundImage

Использование IF со style.backgroundImage

ПриветЯ начал изучать JS и в процессе работы возник вопрос

336