Ниже приведен код, в котором заполненные 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>