javascript - 如何在事件阶段更改时间线圆圈的颜色？

Question

我创建了一个垂直时间轴。现在我必须在事件阶段设置圆圈的背景颜色。您可以检查下图中第一个带文字的圆圈是事件舞台，背景颜色为红色。

例子:

我有四个表单，分别称为 form1、form2、form3、form4。当页面重新加载时，第一个圆圈始终为红色背景。如果用户在 form1 上，则带有文本的圆圈的背景颜色为红色。单击 button1 后，第二个圆圈为红色背景，第一个圆圈为绿色。如果用户单击 form2，则第二个圆圈为绿色，第三个圆圈为红色。如果用户点击了第三个按钮3，那么背景的第三个圆圈是绿色的，第四个圆圈是红色的。

我尝试了一些代码，只有第一个圆圈有效，如果我点击 form1 中的 Button1，所有圆圈都显示为红色。

我的脚本有问题。请检查一下。还要在点击事件中检查我的按钮名称，因为我为每个按钮设置了相同的名称。

我在这里更新我的代码。现在的问题是，如果该字段为空，即使我收到验证错误消息，它也会显示绿色圆圈。 https://jsfiddle.net/Narendra2015/g2j1rtzn/

你能帮我解决这个问题吗？

$(document).ready(function(){
  $('.button-clicked').click(function(){

    $('.info-timeline ul li span').removeClass("timeline-circle-active");
    $('.info-timeline ul li a').removeClass("timeline-text-active");

    $('.info-timeline ul li span').addClass("timeline-circle-active");
    $('.info-timeline ul li a').addClass("timeline-text-active");
});
});

$(document).ready(function() {
    $("form[name='form1']").validate({
        rules: {
            fname: {
                required: true,
                 minlength:3,
                maxlength:50
            }
        },
         submitHandler: function() {
         //form.submit();
          $.ajax({
            type: 'post',
            url: 'process.php',
            data: $("form[name='form1']").serialize(),
           success: function (data) {
           //alert(data);
           $('#first').hide();
           $('#second').show();
            }
          });
        }
    })
});

$(document).ready(function() {
    $("form[name='form2']").validate({
        rules: {
            mname: {
                required: true,
                 minlength:3,
                maxlength:50
            }
        },
         submitHandler: function() {
         //form.submit();
          $.ajax({
            type: 'post',
            url: 'process.php',
            data: $("form[name='form2']").serialize(),
           success: function (data) {
           //alert(data);
           $('#second').hide();
           $('#third').show();
            }
          });
        }
    })
});

$(document).ready(function() {
    $("form[name='form3']").validate({
        rules: {
            age: {
                required: true,
                 minlength:3,
                maxlength:50
            }
        },
         submitHandler: function() {
         //form.submit();
          $.ajax({
            type: 'post',
            url: 'process.php',
            data: $("form[name='form4']").serialize(),
           success: function (data) {
           //alert(data);
           $('#third').hide();
           $('#four').show();
            }
          });
        }
    })
});

.info-timeline ul{list-style: none;margin: 0;padding: 0;}
.info-timeline ul li{margin:0 10px;}
.info-timeline ul li span{
  position: relative;
  border: 2px solid #000;
  border-radius: 100%; 
  width: 45px;
  line-height: 40px;
  text-align: center;
  margin-top: 30px;
  color: #000;
  z-index: 2;
  display: inline-block;
}

.info-timeline ul li span.timeline-circle-active{
  background-color: #ff0000;
  color: #000;
  border: 1px solid #ffff00 !important;
}
.info-timeline ul li a.timeline-text-active{
	color: #ff0000 !important;
}

.info-timeline ul li:not(:first-of-type) span:before {
  position: absolute; 
  border: 1px solid #000;
  width: 0; 
  height: 30px; 
  display: block;
  content: ''; 
  left: 50%; 
  z-index: 1; 
  top: -32px; 
  margin-left: -1px;
  }

.info-timeline ul li:first-child {margin-top: 0;}
.info-timeline ul li:first-child:before {display: none;}
.info-timeline ul li a{color: #000;margin: 10px;}

#second, #third, #four{
	display: none;

}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<div class="info-timeline">
		<ul>
			<li><span class="timeline-circle-active">1</span><a href="#" class="timeline-text-active">Button1</a></li>
			<li><span>2</span><a href="#">Button2</a></li>
			<li><span>3</span><a href="#">Button3</a></li>
			<li><span>4</span><a href="#">Button4</a></li>
		</ul>
	</div><!--info-timeline-->

<div id="first">
	<form method="post" action="" name="form1">
		<input type="text" name="fname" placeholder="first name">
		<button type="submit" class="button-clicked">Button1</button>
	</form>
</div>

<div id="second">
	<form method="post" action="" name="form2">
		<input type="text" name="mname" placeholder="middle name">
		<button type="submit" class="button-clicked">Button2</button>
	</form>
</div>

<div id="third">
	<form method="post" action="" name="form3">
		<input type="text" name="lname" placeholder="last name">
		<button type="submit" class="button-clicked">Button3</button>
	</form>
</div>

<div id="four">
	<form method="post" action="" name="form4">
		<input type="text" name="age" placeholder="age">
		<button type="submit" class="button-clicked">Submit</button>
	</form>
</div>

Answer 1

一个工作示例:

(因为提交，恐怕你必须自己尝试。但它对我有用)

注意:

• 我为 li 添加了一个 ID 属性(circle-1、circle-2 等)
• 表单使用 GET 方法，而不是 POST(必须在 URL 中使用 next_index)

概要:

当您提交表单时，属性 next_index(圆圈)随表单一起发送。由于这个属性，我们知道必须选择哪个 LI。

但应该存在更智能的解决方案(例如 sessionStorage)。但这一个符合需要。

  $(document).ready(function(){
    
    // The next circle index  (1-start))
    let curr_index = getQueryParam('next_index') ;
    if (curr_index == 'next_index'){ curr_index = 1 }

    /* Here the condition on validation
       
      if (validation is not ok due to x reasons) 
      {
        curr_index -- ; // => stay at current step
      }

    */ 
      
    $('li#circle-'+curr_index).find('span').addClass("timeline-circle-active");
    $('li#circle-'+curr_index).find('a').addClass("timeline-text-active");
  });

  //To get a param in the querystring
  function getQueryParam(param) {
      location.search.substr(1)
          .split("&")
          .some(function(item) { // returns first occurence and stops
              return item.split("=")[0] == param && (param = item.split("=")[1])
          })
      return param
  }

     
      .info-timeline ul{list-style: none;margin: 0;padding: 0;}
      .info-timeline ul li{margin:0 10px;}
      .info-timeline ul li span {
        position: relative;
        border: 2px solid #000;
        border-radius: 100%; 
        width: 45px;
        line-height: 40px;
        text-align: center;
        margin-top: 30px;
        color: #000;
        z-index: 2;
        display: inline-block;
      }

      .info-timeline ul li span.timeline-circle-active{
        background-color: #ff0000;
        color: #000;
        border: 1px solid #ffff00 !important;
      }
      .info-timeline ul li a.timeline-text-active{
      	color: #ff0000 !important;
      }

      .info-timeline ul li:not(:first-of-type) span:before {
        position: absolute; 
        border: 1px solid #000;
        width: 0; 
        height: 30px; 
        display: block;
        content: ''; 
        left: 50%; 
        z-index: 1; 
        top: -32px; 
        margin-left: -1px;
        }

      .info-timeline ul li:first-child {margin-top: 0;}
      .info-timeline ul li:first-child:before {display: none;}
      .info-timeline ul li a{color: #000;margin: 10px;}

      #second, #third, #four{
      	display: none;

      }
      
   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-timeline">
		<ul>
			<li id="circle-1"><span>1</span><a href="#">Button1</a></li>
			<li id="circle-2"><span>2</span><a href="#">Button2</a></li>
			<li id="circle-3"><span>3</span><a href="#">Button3</a></li>
			<li id="circle-4"><span>4</span><a href="#">Button4</a></li>
		</ul>
	</div><!--info-timeline-->

<div id="first">
	<form method="get" action="" name="form1">
		<input type="text" name="fname" placeholder="first name">
    <input type="hidden" name="next_index" value="2" />
		<button type="submit" class="button-clicked">Button1</button>
	</form>
</div>

<div id="second">
	<form method="get" action="" name="form2">
		<input type="text" name="mname" placeholder="middle name">
    <input type="hidden" name="next_index" value="3" />
		<button type="submit" class="button-clicked">Button2</button>
	</form>
</div>

<div id="third">
	<form method="get" action="" name="form3">
		<input type="text" name="lname" placeholder="last name">
    <input type="hidden" name="next_index" value="4" />
		<button type="submit" class="button-clicked">Button3</button>
	</form>
</div>

<div id="fourth">
	<form method="get" action="" name="form4">
		<input type="text" name="age" placeholder="age">
		<button type="submit" class="button-clicked">Submit</button>
	</form>
</div>