Все действия внутри одного блок с классом

222

20 декабря 2016, 23:04

Есть блок:

var $size = 155; 
if ($('.review-cont').height() > $size) { 
  $('.review-cont').addClass('re-hide'); 
  $('<span>', { 
    text: 'Подробнее', 
    class: 're-open' 
  }).appendTo('.review-bottom'); 
  $(".re-open").click(function() { 
    $(this).siblings('.review-cont').toggleClass('re-hide').toggleClass('re-full'); 
    var $button = $(this); 
    $button.text($button.text() == "Подробнее" ? "Закрыть" : "Подробнее"); 
  }); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="review"> 
  <div class="review-top">имг</div> 
  <div class="review-middle"> 
    <p class="review-name">текст</p> 
    <p class="review-location">еще текст</p> 
  </div> 
  <div class="review-bottom"> 
    <div class="review-cont">КОНТЕНТ</div> 
  </div> 
</div>

Таких блоков много. Из задачи всё просто - если указанный блок превышает указанную в скрипте высоту, то добавляем класс и кнопку.

Но проблема в том, что если какой-то из множества блоков укладывается в высоту, указанную в скрипте, то скрипт не отрабатывает не только у данного блока, но и во всех остальных.

Как сделать, чтобы высота считалась в каждом отдельном случаи независимо? Предполагаю использование this, но не понял, как его приладить.

Answer 1

Метод height возвращает значение высоты для первого элемента в коллекции

Description: Get the current computed height for the first element in the set of matched elements.

Для проверки всех нужно использовать each

Кроме того для вставки span, так же надо брать элемент относительно текущего. в данном случае подойдет метод parent()

Пример:

var $size = 155; 
$('.review-cont').each(function() { 
  var $review = $(this); 
  if ($review.height() > $size) { 
    $review.addClass('re-hide'); 
    $('<span>', { 
        text: 'Подробнее', 
        class: 're-open' 
      }).appendTo($review.parent()) 
      .click(function() { 
        $(this).siblings('.review-cont').toggleClass('re-hide').toggleClass('re-full'); 
        var $button = $(this); 
        $button.text($button.text() == "Подробнее" ? "Закрыть" : "Подробнее"); 
      }); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="review"> 
  <div class="review-top">имг</div> 
  <div class="review-middle"> 
    <p class="review-name">текст</p> 
    <p class="review-location">еще текст</p> 
  </div> 
  <div class="review-bottom"> 
    <div class="review-cont">КОНТЕНТ</div> 
  </div> 
</div>

Answer 2

Я бы примерно так сделал -

let listItemAll = Array.from( document.body.querySelectorAll( '.autoresize-content-container' ) ); 
 
const LIST_ITEM_MAX_HEIGHT = 36; 
 
function listItemSizeValid(element){ 
  return  element.scrollHeight > LIST_ITEM_MAX_HEIGHT; 
}  
function setElementSizeAllowedTask( element ){ 
  element.dataset.state = "max-size" 
} 
 
listItemAll 
  .filter( listItemSizeValid ) 
  .forEach( setElementSizeAllowedTask );

.list { 
  list-style: none; 
   
  display: inline-flex; 
   
  justify-content: center; 
} 
 
.list-item { 
  max-height: 80px; 
   
  width: 100px; 
} 
 
.autoresize-content-container[data-state="default-size"] > button { 
  display: none; 
} 
 
.autoresize-content-container[data-state="max-size"] { 
  background: pink; 
}

<main> 
  <ul class="list"> 
    <li class="list-item"> 
      <div class="autoresize-content-container" data-state="default-size"> 
        <span> 
          some text 
          some text 
        </span> 
        <button>развернуть</button> 
      </div> 
    </li> 
    <li class="list-item"> 
      <div class="autoresize-content-container" data-state="default-size"> 
        <span> 
          some text 
          some text 
          some text 
          some text 
        </span> 
        <button>развернуть</button> 
      </div> 
    </li> 
    <li class="list-item"> 
      <div class="autoresize-content-container" data-state="default-size"> 
        <span> 
          some text 
          some text 
        </span> 
        <button>развернуть</button> 
      </div> 
    </li> 
    <li class="list-item"> 
      <div class="autoresize-content-container" data-state="default-size"> 
        <span> 
          some text 
          some text 
          some text 
          some text 
        </span> 
        <button>развернуть</button> 
      </div> 
    </li> 
    <li class="list-item"> 
      <div class="autoresize-content-container" data-state="default-size"> 
        <span> 
          some text 
          some text 
        </span> 
        <button>развернуть</button> 
      </div> 
    </li> 
    <li class="list-item"> 
      <div class="autoresize-content-container" data-state="default-size"> 
        <span> 
          some text 
          some text 
          some text 
          some text 
        </span> 
        <button>развернуть</button> 
      </div> 
    </li> 
  </ul> 
</main>

Из-за того что я не хочу писать css для для контейнера контента, который не входит в суть вопроса, я не стал уменьшать размеры, как в моем предыдущем примере, чтобы Вы увидели кнопки, которые есть только у контейнеров превысивших высоту.

Особое внимание на то как устанавливается кнопка. В js для это нужно лишь изменить флаг с default-size на max-size и тогда к контейнеру применяются стили, которые прописаны для подсветки фона.

И хватит уже использовать позавчерашнюю jQ, чистый js уже давно превзошел её.