0

Ниже приведен код, в котором заполненные input подсвечиваются зеленой полосой. Но при вводе в один input начинают подсвечиваться и остальные. Как сделать так, что бы подсвечивался только заполненный input?

$('.pay_line').change(function() {
  tmpval = $(this).val();
  if (tmpval == '') {
    $('.pay_line_a').removeClass('class1');
  } else {
    $('.pay_line_a').addClass('class1');
  }
});
.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

input.pay_input,
input.pay_input:focus {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

input.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_line_a.class1 {
  border-bottom: 1px solid #008F00;
}

.pay_line_a {
  border-bottom: 1px solid #E3E3E3;
}

:focus {
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input pay_line" type="text" name="" placeholder="John">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input pay_line" type="text" name="" placeholder="Doe">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

</div>

2

3 ответа 3

2

$(this).next('.pay_line_a')
От текущего элемента, с которым произошло событие $(this) найти следующим элементом .pay_line_a

$('.pay_line').change(function() {
  const tmpval = $(this).val();
  const line = $(this).next('.pay_line_a');
  if (tmpval === '') {
    line.removeClass('active');
  } else {
    line.addClass('active');
  }
});
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:focus {
  outline: none;
}

.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

input.pay_input {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

input.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_line_a.active {
  border-bottom-color: #008F00;
}

.pay_line_a {
  border-bottom: 1px solid #E3E3E3;
  transition: border-color 0.2s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input pay_line" type="text" name="" placeholder="John">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input pay_line" type="text" name="" placeholder="Doe">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

</div>

Чуть анимашек:

$('.pay_line').change(function() {
  const tmpval = $(this).val();
  const line = $(this).next('.pay_line_a');
  if (tmpval === '') {
    line.removeClass('active');
  } else {
    line.addClass('active');
  }
});
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:focus {
  outline: none;
}

.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

input.pay_input {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

input.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_line_a {
  position: relative;
}

.pay_line_a::before,
.pay_line_a::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: transform;
}

.pay_line_a::before {
  background-color: #E3E3E3;
}

.pay_line_a::after {
  transform-origin: left;
  background-color: #008F00;
  transform: scaleX(0);
}

.pay_line_a.active::after {
  transform: scaleX(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input pay_line" type="text" name="" placeholder="John">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input pay_line" type="text" name="" placeholder="Doe">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

</div>

3
  • это просто подсветка во время ввода, подсвечивается даже если инпут пустой, а нужна фактически валидация, простая но валидация
    – 로마 인
    23 ноя 2020 в 16:08
  • @Roman вы верно подметили. 23 ноя 2020 в 16:13
  • @АннаМатвеева поправил 23 ноя 2020 в 16:36
2

сделал на чистом js, на jQuery не умею

const payLine = document.querySelectorAll('.pay_line');

payLine.forEach(element=>{
  element.addEventListener('change', ()=>{
    const value = element.value
    if(value == '') {
      element.parentElement.querySelector('.pay_line_a').classList.remove('class1')
    } else {
      element.parentElement.querySelector('.pay_line_a').classList.add('class1')
    }
  })
})
.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

input.pay_input,
input.pay_input:focus {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

input.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_line_a.class1 {
  border-bottom: 1px solid #008F00;
}

.pay_line_a {
  border-bottom: 1px solid #E3E3E3;
}

:focus {
  outline: none;
}
<a href="https://jquery.com/" class="existing">jQuery</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input pay_line" type="text" name="" placeholder="John">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input pay_line" type="text" name="" placeholder="Doe">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

2

Можно обойтись без дополнительных блоков для бордера.
И атрибут for предназначен для тега label который ссылается по id нужного инпута, в твоем случае он ни чего не делает.

$('.pay_input').change(function() {
  let $this = $(this),
      tmpval = $this.val();
      
  if (tmpval == '') {
    $this.removeClass('class1');
  } else {
    $this.addClass('class1');
  }
});
.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.pay_input {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  border-bottom: 1px solid #E3E3E3;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

.pay_input.class1 {
  border-bottom: 1px solid #008F00;
}

.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_input:focus {
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input" type="text" name="" placeholder="John">
  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input" type="text" name="" placeholder="Doe">
  </div>

</div>

4
  • Есть некоторые минусы, нельзя анимировать будет, как обычный блок 23 ноя 2020 в 16:49
  • @МихаилКамахин в данном случае нет ни какой анимации и у обычного блока также использовался бордер, если анимировать бордер, то ни какой разницы нет
    – kost1k
    23 ноя 2020 в 16:57
  • А если захочется сделать, будет неудобно и придётся переписывать 23 ноя 2020 в 17:01
  • Ну если захочется сделать, то в любом случае что-то придется дописать, добавить два блока в разметку думаю не составит труда, а оставлять сейчас абсолютно ненужные блоки без надобности не вижу смысла.
    – kost1k
    23 ноя 2020 в 17: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.

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