jquery - 多步进度条更改输入字段中回车键的状态

Question

<style>
  .typeform {
  margin-top:3rem;
  }
  .animations {
  animation: animation-1 0.5s linear;
  }
  @keyframes animation-1 {
  0% {
  bottom: -100px;
  opacity: 0;
  }
  50% {
  bottom: -25px;
  opacity: 0.5;
  }
  100% {
  bottom: 0px;
  opacity: 1;
  }
  }
  .typeform p {
  font-size: 20px !important;
  }
  .ip-element {
  padding: 10px 0px;
  width: 80%;
  border: 0px;
  margin-left:40px;
  font-size: 20px;
  background: transparent;
  }
  .ip-element {
  outline: none;
  }
  .ok-btn {
  margin-top: 10px;
  margin-left: 40px;
  color: #ccc;
  }
  /*.ok-btn a {*/
  /*    margin-top: 10px;*/
  /*    text-decoration: none;*/
  /*    padding: 10px 17px;*/
  /*    color: #fff !important;*/
  /*    background: #00aae7;*/
  /*    font-weight: bold;*/
  /*    transition: all 0.3s;*/
  /*    cursor: pointer;*/
  /*}*/
  .zoom{
  animation:zoom 0.2s linear;
  }
  @keyframes zoom{
  0%{
  transform:scale(0);
  }
  50%{
  transform:scale(0.5);	
  }
  100%{
  transform:scale(1);	
  }
  }
  .list {
  font-size: 18px;
  padding-right: 5px;
  }
  .input-element {
  position: relative;
  }
  .blinker {
  position: absolute;
  top:9.5px;
  left: 35px;
  animation: blink 800ms linear infinite;
  opacity: 1;
  font-size: 24px;
  }
  @keyframes blink {
  from {
  position: absolute;
  opacity: 1;
  }
  to {
  position: absolute;
  opacity: 0;
  }
  }
  .ip-element:focus .blinker{
  display: none;
  }
  .ip-element::placeholder{
  color:#777777;
  font-weight: 400;
  }
  .border-btm{
  border-bottom:2px solid #ccc;
  }
  #submit-mesg{
  margin-top: 7rem;
  text-align: center !important;
  color: #00aae7;
  font-size: 20px !important;
  font-weight: 900;
  }
  .push{
  text-decoration: none;
  margin-top:5rem;
  color: #fff;
  cursor: pointer;
  background: #00aae7;
  padding: 10px 17px;
  display: inline-block;
  color:#fff !important;
  cursor:pointer;
  }
  /*multistep*/
  .multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
  content: counter(stepNum);
  font-family: inherit;
  font-weight: 700;
  }
  .multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
  background-color: #ededed;
  }
  .multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%;
  }
  .multi-steps > li {
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color:#d8f2fe;
  }
  .multi-steps > li:before {
  content: "\f00c";
  content: "\2713;";
  content: "\10003";
  content: "\10004";
  content: "\2713";
  display: block;
  margin: 0 auto 4px;
  background-color: #fff;
  width: 36px;
  height: 36px;
  line-height: 32px;
  text-align: center;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-color: #2368a0;
  border-radius: 50%;
  }
  .multi-steps > li:after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: #2368a0;
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: -1;
  }
  .multi-steps > li:last-child:after {
  display: none;
  }
  .multi-steps > li.is-active:before {
  background-color: #003f6d;
  border-color: #003f6d;
  }
  .multi-steps > li.is-active ~ li {
  color: #808080;
  }
  .multi-steps > li.is-active ~ li:before {
  background-color: #ededed;
  border-color: #ededed;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
                    <div class="container-fluid">
                      <br><br>
                      <ul class="list-unstyled multi-steps">
                        <li class="s1 is-active"></li>
                        <li class="s2 add"></li>
                        <li class="s3"></li>
                        <li class="s4"></li>
                      </ul>
                    </div>
                </div>
                <div class="col-md-12 mb-2" style="position:relative">
                  <div class="typeform">
                    <div class="col-md-12 typeform-element">
                      <p><span class="list">1</span>&#8594;What's your First Name? *</p>
                      <div class="input-element">
                        <input type="text" name="fname" placeholder="Type your answer..." required class="ip-element" id="fname"> 
                        <span class="blinker">|</span>
                      </div>
                      <div class="ok-btn">
                        <span>Press Enter&#8594;</span>
                      </div>
                    </div>
                    <div class="col-md-12 typeform-element nextelement">
                      <p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
                      <div class="input-element">
                        <input type="text" name="lname" placeholder="Type your answer..." required class="ip-element" id="lname">
                        <span class="blinker">|</span>
                      </div>
                      <div class="ok-btn">
                        <span>Press Enter&#8594;</span>
                      </div>
                    </div>
                    <div class="col-md-12 typeform-element nextelement">
                      <p><span class="list">3</span>&#8594;Let's know your Email Address*</p>
                      <div class="input-element">
                        <input type="email" name="email" placeholder="Type your answer..." required class="ip-element" id="emails">
                        <span class="blinker">|</span>
                      </div>
                      <div class="ok-btn">
                        <span>Press Enter&#8594;</span>
                      </div>
                    </div>
                    <div class="col-md-12 typeform-element nextelement">
                      <p><span class="list">4</span>&#8594;Your Phone Number*</p>
                      <div class="input-element">
                        <input type="text" name="phonenumber" placeholder="Type your answer..." required class="ip-element" id="pnumber">
                        <span class="blinker">|</span>
                      </div>
                      <div class="ok-btn">
                        <span>Press Enter&#8594;</span>
                      </div>
                    </div>
                    <div class="col-md-12  nextelement" style="text-align:center">
                      <p id="submit-mesg">&#10004; We recieved your Application</p>
                      <a class="push">Submit</a>
                    </div>
                  </div>
                </div>
<script>
  $('.nextelement').hide();
  
     // $('.nexto').on('click', function (event) {
     // 	$(this).closest('.typeform-element').hide();
     // 	$(this).closest('.typeform-element').next('.nextelement').show();
     //     $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
     // });
  
  
     $('.nexto').hide();
     $('.ok-btn').hide();
  
  var required = $('input[required]');
  required.on('keyup', function (event) {
   $(this).closest('.typeform-element').find('.ok-btn').show();
    
  if(event.key == "Enter"){
  	$(this).closest('.typeform-element').hide();
     	$(this).closest('.typeform-element').next('.nextelement').show();
         $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
  }
  });
  
  
     $('.ip-element').on('click', function (event) {
         $(this).addClass('border-btm');
         $(this).next('.blinker').css('display', 'none');
     })
  
      $('#submit-mesg').hide();
         
         $(".push").on('click', function(event){
         	$('#submit-mesg').addClass('zoom');
             $('#submit-mesg').show();
             $(this).hide();
         })
     // 
</script>                

<ul class="list-unstyled multi-steps">
  <li class="is-active"></li>
  <li class="add"></li>
  <li></li>
  <li></li>
  <li ></li>
</ul>
<div class="typeform">
  <div class="col-md-12 typeform-element">
    <p><span class="list">1</span>&#8594;What's your First Name? *</p>
    <div class="input-element">
      <input type="text" name="fname" placeholder="Type your answer..." required class="ip-element" > 
      <span class="blinker">|</span>
    </div>
    <div class="ok-btn">
      <span>Press Enter&#8594;</span>
    </div>
  </div>
  <div class="col-md-12 typeform-element nextelement">
    <p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
    <div class="input-element">
      <input type="text" name="lname" placeholder="Type your answer..." required class="ip-element" >
      <span class="blinker">|</span>
    </div>
    <div class="ok-btn">
      <span>Press Enter&#8594;</span>
    </div>
  </div>
  <div class="col-md-12 typeform-element nextelement">
    <p><span class="list">3</span>&#8594;Let's know your Email Address*</p>
    <div class="input-element">
      <input type="email" name="email" placeholder="Type your answer..." required class="ip-element">
      <span class="blinker">|</span>
    </div>
    <div class="ok-btn">
      <span>Press Enter&#8594;</span>
    </div>
  </div>
  <div class="col-md-12 typeform-element nextelement">
    <p><span class="list">4</span>&#8594;Your Phone Number*</p>
    <div class="input-element">
      <input type="text" name="phonenumber" placeholder="Type your answer..." required class="ip-element">
      <span class="blinker">|</span>
    </div>
    <div class="ok-btn">
      <span>Press Enter&#8594;</span>
    </div>
  </div>
  <div class="col-md-12  nextelement" style="text-align:center">
    <p id="submit-mesg">&#10004; We recieved your Application</p>
    <a class="push">Submit</a>
  </div>
</div>


$('input[required]').on('keyup', function (event) {
  if(event.key == "Enter") {
      $(this).closest('.typeform-element').hide();
    $(this).closest('.typeform-element').next('.nextelement').show();
       $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
       $('.multi-steps').closest('li').prev('li').toggleClass('is-active');
  }
});

我使用上面的jquery代码为下一个列表元素添加“is-active”类，并在输入ENTER键时从列表中的前一个元素中删除“is-active”类，其中包含类“multi-steps”每个输入字段。

当我在每个输入字段中单击回车键时，多步进度条应将“is-active”类添加到下一个列表项，并从上一个列表项中删除“is-active”。

如何做到这一点？

Answer 1

您可以使用此代码:

$('input[required]').on('keyup', function (event) {
  if(event.key == "Enter") {
      $(this).closest('.typeform-element').hide();
    $(this).closest('.typeform-element').next('.nextelement').show();
       $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
    let activeLi = $('.multi-steps li.is-active');
    activeLi.next('li').toggleClass('is-active');
    activeLi.toggleClass('is-active')
  }
});

它将事件 li 保存在 activeLi var 中，然后在切换类本身之前切换下一个 li 元素。

您可以在 https://codepen.io/jeprubio/pen/ZEGKYYM 中看到它的工作情况