1

При клике на див (внутри инпут), идёт добавление класса .after, где он анимирует абс.поз. линию с 0 к 100% ширины. Разумеется при клике на другой див, с другим индексом, у ранее кликнутого должен убраться класс. Вроде бы все просто. Пишу переменную var temp;, вне области видимости обработчика, и в конце ей присваивается кликнутый див, при след. клике проверка всегда будет удалять класс у предыдущего. Но магия в том, что я догадался("умно звучит") зарание определить "назначение" переменной, только так это работает. Почему ? Спасибо.

var temp = $('.address-section > div:nth-child(1)');

$('.address-section > div').click(function(){
    var index = $(this).index() + 1;
var item = $('.address-section > div:nth-child('+ index + ')');

if(temp.hasClass('after')){
    temp.removeClass('after');
}

    item.addClass('after');

temp = item;
});
2
  • Судя по описанию, вам вообще не клик надо отслеживать, а focus/blur инпута. 27 сен 2018 в 19:21
  • Да, забыл, только последнее поле - textarea.
    – Predaytor
    27 сен 2018 в 19:54

2 ответа 2

4

Если я правильно понял задачу, то должно быть что-то типа:

$(function () {
  var $inputs = $('.address-section > div > input');
  
  $inputs.on('focus blur', function (e) {
    $(this).parent().toggleClass('after', e.type === 'focus');
  });
});
.address-section div {
  display: inline-block;
  position: relative;
}

.address-section div::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  max-width: 0;
  background-color: green;
  transition: max-width .3s;
}

.address-section div.after::after {
  max-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="address-section">
  <div><input/></div>
  <div><input/></div>
  <div><input/></div>
</div>

2
  • Верно, спасибо, только у меня там еще textarea, спасибо за событие фокуса, забыл совсем.
    – Predaytor
    27 сен 2018 в 19:54
  • 1
    @Predaytor, ну, тут главное концепция, а не само решение. 27 сен 2018 в 19:55
2

Можете не назначать. Тогда это надо учитывать при обращении к temp.

var temp;

...

  if (temp) {
    temp.removeClass('after');
  } 
...

Или вообще без temp:

  $('.address-section > div.after').removeClass('after');

И мне непонятны эти манипуляции с индексом. Разве это не то же самое?

var item = $(this);
3
  • я ведь нуб, спасибо.
    – Predaytor
    27 сен 2018 в 19:51
  • @Predaytor Пожалуйста. Не забудьте принять ответ MedvedevDev - "галочка" слева от ответа.
    – user176262
    27 сен 2018 в 20:07
  • Прошу прощения.
    – Predaytor
    27 сен 2018 в 20:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.