Нужна помощь с jQuery скриптом

366

03 мая 2017, 10:56

Никак не могу додумать как по повторному клику по блоку возвращать все это дело в исходное состояние.

Буду рад если кто-то подскажет, у меня явно какие то проблемы с логикой. https://codepen.io/anon/pen/YVQpgO

$('.block').on('click', function(){
    $('.block').find('.img-gap').fadeOut('300');
    $('.block').removeClass('active');
    $('.block').removeClass('deactive');
    $(this).addClass('active');
    $(this).siblings().addClass('deactive');
});
$('.block.active').on('click', function(){
    $('.block').find('.img-gap').fadeIn('300');
    $('.block').removeClass('active');
    $('.block').removeClass('deactive');
});

Answer 1

$(.block.active) - на момент присваивания обработчика событий, такого селектора нет, следовательно события не присвоится. в событие click класса .block проверяйте наличие класса .active у текущего элемента.

$('.block').on('click', function(){ 
        $('.block').removeClass('deactive'); 
            
        if ($(this).hasClass('active')) { 
          $('.block').find('.img-gap').fadeIn('300'); 
          $('.block').removeClass('active'); 
        } else { 
          $('.block').find('.img-gap').fadeOut('300'); 
          $('.block').removeClass('active'); 
          $(this).addClass('active'); 
          $(this).siblings().addClass('deactive'); 
        } 
    });

.block { 
  height: 536px; 
  width: 33.1%; 
  display: inline-block; 
  background: #ccc; 
  vertical-align: top; 
  transition: 1s; 
  cursor: pointer; 
  margin-top: 61px; 
  float: left; 
  margin-right: 2px; 
} 
 
.block .img-gap { 
  display: flex; 
  width: 100%; 
  height: 100%; 
} 
 
.block .img-gap .img-gap__logo { 
  margin: auto; 
} 
 
.block__text { 
  opacity: 0; 
  transition: 0.1s; 
  color: white; 
  padding: 100px; 
} 
 
.block__title { 
  display: inline-block; 
} 
.block__subtitle{ 
  display: block; 
} 
.block__more-btn { 
  @include main-btn; 
  max-width: 178px; 
  background: transparent; 
  color: white; 
  border: 2px solid white; 
} 
 
.block.active { 
  width: 62%; 
  transition: 1s; 
} 
 
.block.deactive { 
  width: 18.7%; 
} 
 
.block.active .block__text { 
  opacity: 1; 
  transition: 0.2s; 
  transition-delay: 0.8s; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <div class="img-gap"> 
    <img src="https://placehold.it/100/100" alt="" class="img-gap__logo"> 
  </div> 
 
 
  <div class="block__text"> 
    <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4"> 
        <img src="https://placehold.it/100/100" alt="" class="img-gap__logo"> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"> 
        <h2 class="block__title">title</h2> 
        <span class="block__subtitle">subtitle</span> 
 
        <p class="block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias harum, doloremque ratione asperiores laboriosam facere vitae. At facilis corrupti dolorem debitis, amet minus voluptatum fuga, voluptates nulla repellat nam quasi. 
        </p> 
        <a href="#" class="block__more-btn">подробнее</a> 
      </div> 
    </div> 
  </div> 
</div> 
<div class="block"> 
  <div class="img-gap"> 
    <img src="https://placehold.it/100/100" alt="" class="img-gap__logo"> 
  </div> 
  <div class="block__text"> 
    <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4"> 
        <img src="https://placehold.it/100/100" alt="" class="img-gap__logo"> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"> 
        <h2 class="block__title">title</h2> 
        <span class="block__subtitle">subtitle</span> 
 
        <p class="block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias harum, doloremque ratione asperiores laboriosam facere vitae. At facilis corrupti dolorem debitis, amet minus voluptatum fuga, voluptates nulla repellat nam quasi. 
        </p> 
        <a href="#" class="block__more-btn">подробнее</a> 
      </div> 
    </div> 
  </div> 
</div> 
<div class="block"> 
  <div class="img-gap"> 
    <img src="https://placehold.it/100/100" alt="" class="img-gap__logo"> 
  </div> 
  <div class="block__text"> 
    <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4"> 
        <img src="https://placehold.it/100/100" alt="" class="img-gap__logo"> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"> 
        <h2 class="block__title">title</h2> 
        <span class="block__subtitle">subtitle</span> 
 
        <p class="block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias harum, doloremque ratione asperiores laboriosam facere vitae. At facilis corrupti dolorem debitis, amet minus voluptatum fuga, voluptates nulla repellat nam quasi. 
        </p> 
        <a href="#" class="block__more-btn">подробнее</a> 
      </div> 
    </div> 
  </div> 
</div>

Answer 2

Хотите, можно так:

$('body').on('click', '.block', function(){
    $('.block').find('.img-gap').fadeOut('300');
    $('.block').removeClass('active');
    $('.block').removeClass('deactive');
    $(this).addClass('active');
    $(this).siblings().addClass('deactive');
});
$('body').on('click', '.block.active', function(){
    $('.block').find('.img-gap').fadeIn('300');
    $('.block').removeClass('active');
    $('.block').removeClass('deactive');
});