根据基于对象属性的单击事件,将活动类添加到进度栏并将其删除

Question

我一直在研究这个问题.我需要一些重要的指导.我有一个进度条,它由无序列表组成<ul></ul>,里面有列表项,组成分隔符和圆圈,如下所示相互附加.它们是基于StepSize对象中的属性构建的,我遍历对象并为这些列表项分配类.

<li class="circle"></li>
<li class="divider halfA"></li>
<li class="divider halfB"></li>
<li class="circle"></li>
<li class="divider full"></li>...

我有一个下一个和一个后退按钮,可以更改索引,模仿我在另一个应用程序中运行的单页面应用程序中更改页面.活动类仅添加到您所在的索引,并检查您是否针对可能出现的不同情况使用特定的StepSize.例如,如果你在第一个索引上并且StepSize属性是halfA,那么你激活圆圈1和分隔符1.如果它是一个完整的StepSize而你只激活圆圈1.但这只是在第一个索引情况下,之后逻辑发生变化.希望我的代码能够比言语更准确地揭示这一点.

我目前的问题是第一次和第二次点击或应该是什么index=2,index=3不要提前进度条或激活正确的列表项.从技术上讲,一切都适用于分频器活动状态.我没有完全建立循环活动状态,因为我想让分隔符首先正常工作.有三种StepSize类型,full,halfA和halfB(这是两个列表项但是有一半的完整列表项的宽度StepSize)

我将把我的代码放在下面,但这里有一个JSbin,我还将附上一个预期的交互图.另外,请随意调整StepSize属性以测试不同的顺序,但请记住halfA StepSize必须始终跟随halfB.

希望这一切都有道理.如果需要澄清,我非常乐意提供.真的希望这可以解决,我有点疯了!

https://jsbin.com/getipa/edit?html,console,output

// Example Object Combination #1 full start -> half end
variation = {
    ActiveSection:'',
    Sections:
        [
          {ID: '1', StepSize:"halfA"}, // Change StepSize's for testing
          {ID: '2', StepSize:'halfB'},
          {ID: '3', StepSize:"full"},
          {ID: '4', StepSize:"halfA"},
          {ID: '5', StepSize:'halfB'},
          {ID: '6', StepSize:"full"},
          {ID: '7', StepSize:"halfA"},
          {ID: '8', StepSize:'halfB'},
          {ID: '9', StepSize:"halfA"},   
          {ID: '10', StepSize:'halfB'},
          {ID: '11', StepSize:"full"}
        ]
};

variation.ActiveSection = variation.Sections[0];

var sectionCount = variation.Sections.length;

// create Progress Bar
var progressBar = $('.progress-bar');
progressBar.append('<ul class="unstyled"></ul>');

var content = '';

for(var i=0; i<sectionCount; i++){

    var stepSize = variation.Sections[i].StepSize;
    var stepClass = stepSize == 'full' ? 'full' : stepSize + ' half';


    if(stepSize == 'full' || stepSize == 'halfA'){
        content += '<li><span class="circle"></span></li>';
    }

    content += '<li><span class="divider ' + stepClass +'"></span></li>';

    if(i == sectionCount-1){
        content += '<li><span class="circle"></span></li>';
    }
}

progressBar.find('ul').append(content);


// bind ProgressBar action

var count = 1;

updateProgressBar(1);

$('.next').click(function(){
    var currentIndex = variation.ActiveSection ?     variation.Sections.indexOf(variation.ActiveSection) : 0;
    var nextIndex = currentIndex == variation.Sections.length-1 ? currentIndex : currentIndex+1;
    variation.ActiveSection = variation.Sections[nextIndex];
    updateProgressBar(count);
    count++;
});

$('.previous').click(function(){
  $('.divider').removeClass('active');
  count = count-2;
  updateProgressBar(count);
  count++;
});


function activateLine(n){
    var dividerList = $('.divider');
    for(var i=0; i<n; i++){
        $(dividerList[i]).addClass('active');
    }
}

function activateCircle(n){
    var circleList = $('.circle');
    for(var i=0; i<n; i++){
        $(circleList[i]).addClass('active');
    }
}


function updateProgressBar(index){ 
  
   console.log(variation.ActiveSection.StepSize + "StepSize");
   console.log(index + "index");
  
  for(x=0;x<=variation.Sections.length;x++){
    if(x === 0){
        if(variation.ActiveSection.StepSize == 'halfA'){
            activateLine(1);
        }
    }
    else if(index -1 == x){
      var n = x;
      x++;
      activateLine(n);
    }
  }
  
  
  
  
  
}

li {
  list-style-type:none;
}

.circle{
  width:25px;
  height:25px;
  background:#808080;
  display:block;
  border-radius:50%;
  float:left;
  
}

.circle.active{
  background:#000000;
}

.divider{
  margin-top:10px;
}



.divider.half{
  width:50px;
  height:5px;
  background:#808080;
  display:block;
  float:left;
}

.divider.half.active{
  background:#000;
}

.divider.full{
  width:100px;
  height:5px;
  background:#808080;
  display:block;
  float:left;
  
}

.divider.full.active{
  background:#000;
}

.menu{
  width:100%;
  display:block;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar"></div>
<a href="#" class="previous">previous</a>
<a href="#" class="next">next</a>

Answer 1

您的代码确实需要一些重要的指导,即使您有好的想法并且您明确掌握了一些基本的编程概念.但是,您的代码缺少的是抽象.

通过抽象,我的意思是很多东西.例如:

• 没有halfA或halfB或third-of-Z与此有关:感觉"有点嚼头"往往是你要么过于宽泛或你的方法过于狭隘的迹象.优先考虑与猴子修补系统相关的明确规模的抽象数字.创建一个部分步骤数组,这些步骤组合在一起,形成整个步骤(用子弹标记).因此,你的榜样可以代表:var steps = [0.5, 0.5, 1, 0.5, 0.5, 1, 0.5, 0.5, 0.5, 0.5, 1];.这样,您就可以清楚地了解"索引"代表什么.例如," 3上面列表中的索引是2.5总共7步骤的步骤,因此我们有2个子弹活动,进度条是第三个子弹的一半".向该系统添加三分之二或四分之一的步骤将是轻而易举的:只需添加该列表中的一些1/3或0.25元素!
• 尽可能少的HTML元素:HTML/CSS/JS可能会很快变得混乱,所以让我们尝试通过删除尽可能多的元素来构建进度条来减少混乱.在你的情况下,由子弹一个元素是不可避免的,但可以更换每一个<div class="divider>"通过跨越整个容器上,你可以调用像活动的基础按一定百分比进度条:$('.progress-bar').width('65%');.(奖励:动画和响应!yay)
• 命名空间和组你的逻辑:分离子弹建设者,阶跃变化情况下,按钮等使所有的模块化和使用数据的属性(MDN)来存储并在DOM元素管理任意数据.将自定义事件绑定到元素并使它们互相激发.

这是我如何解决您的问题的一个例子:JSBin.