Question

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

示例：

我有四个名为form1,form2,form3,form4的表单。当页面重新加载时，第一个圆圈始终位于红色背景中。如果用户在form1，则带有文字的圆圈的背景颜色为红色。单击button1后，第二个圆圈为红色背景，第一个圆圈为绿色。如果用户点击form2，则第二个圆圈为绿色，第三个圆圈为红色。如果用户点击第三个按钮3，则第三个背景圆圈为绿色，四个圆圈为红色。

我尝试了一些代码，只有第一个圆圈正常工作，如果我点击Button1 form1而不是所有显示为红色的圆圈。

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

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

你能帮助我吗？

＆＃13;

$(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();
            }
          });
        }
    })
});

＆＃13;

.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;

}

＆＃13;

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

＆＃13;

Answer 1

一个工作示例：

（因为提交，我担心你必须自己尝试。但它对我有用）

注意：

我在li（circle-1，circle-2等）
表单使用GET方法，而不是POST（必须在URL中QProgressBar）

梗概：

提交表单时，会随表单一起发送属性next_index（圈子）。由于这个属性，我们知道必须选择哪个LI。

应该存在更智能的解决方案（例如next_index）。但这个符合需要。

＆＃13;

sessionStorage

＆＃13;

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

＆＃13;

     
      .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;

      }

＆＃13;

Answer 2

我简化了你的代码（删除了不适用于该问题的代码）。

<强> HTML

我在按钮和跨度之间添加了关系。 data-target id为span。

JQ

在评论后编辑

首先，您获得目标跨度ID（单击button2时，将选择id为＃button2的跨度）

其次，获取当前所选范围之前的范围（如果有）。单击button2时的示例，prevSelected将具有值#button1

然后在span和链接中添加和删除类

请参阅下面的编辑代码

<强> CSS

为greenSpan类

添加样式

<强>观察

无需添加多个$(document).ready(function(){。将所有代码仅包含在一个函数
您可以将该活动类提供给包含li和span的{{1}}，然后在css中设置样式，而不是将活动类提供给a和活动类，例如a和li.active > span {/*timeline-circle-active css*/}

请参阅下面的代码段。如果它对你有所帮助，请告诉我。我希望我解释得很好。

li.active > a {/*timeline-text-active css*/}

$(document).ready(function() {

  $('.button-clicked').click(function() {

    var TargetSpan = "#" + $(this).attr("data-target"),
        prevSelected = $(TargetSpan).parents("li").prev("li").find("span")
      
    prevSelected.addClass("greenSpan").removeClass("timeline-circle-active")
    prevSelected.next("a").addClass("greenLink").removeClass("timeline-text-active")
    $(TargetSpan).addClass("timeline-circle-active").removeClass("greenSpan")
    $(TargetSpan).next("a").addClass("timeline-text-active")


  });
});

.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 a.greenLink {
  color: green
}

.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;
}

.info-timeline ul li span.greenSpan {
  background: green
}

如何在活动阶段更改时间轴圈子的颜色？

2 个答案: