Магия JavaScript(jQuery) для нуба. Объясните?

242
16 января 2019, 23:50

При клике на див (внутри инпут), идёт добавление класса .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;
});
Answer 1

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

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

Answer 2

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

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

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

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

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

var item = $(this);
READ ALSO
Как заменить input на просто текст и наоборот?
javascript

Как заменить input на просто текст и наоборот?

Есть input, при вводе правильного значения он превращается из поля ввода в то число которое было введено пользователем

 259
Вызвать метод из промиса [дубликат]
javascript

Вызвать метод из промиса [дубликат]

На данный вопрос уже ответили:

 189
Фильтр записей в таблице
javascript

Фильтр записей в таблице

На странице есть что-то типо таблицы, куда попадают записи из БД с помощью аякс запроса при загрузке этой самой страницыТакже есть кнопки,...

 261
Не работает else If в JavaScript. [закрыт]
javascript

Не работает else If в JavaScript. [закрыт]

Когда ввожу 1 и 4 все нормально 1 < 4, но когда 4 и 1 то показывает 4 = 4 пробовал все и ничего не получилосьПомогите!!! Спасибо

 205