javascript - 根据基于对象属性的click事件向进度栏添加和删除 Activity 类

我已经在这个问题上工作了一段时间了。我需要一些主要指导。我有一个进度条，它是由无序列表<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>...

我有一个下一个和一个后退按钮，用于更改索引，模仿在另一个应用程序中运行的单页应用程序中更改页面。 Activity 类仅添加到您所在的索引中，它会检查您是否在特定StepSize上针对可能出现的不同情况进行了检查。例如，如果您在第一个索引上，且StepSize属性为halfA，则激活圆1和除法器1。如果它是完整的StepSize，则仅激活圆1。但这仅在第一个索引情况下，之后逻辑变化。希望我的代码能够比用文字更准确地揭示这一点。

我当前的问题是第一次单击和第二次单击，或者index=2和index=3应该不会 push 进度栏或激活正确的列表项。从技术上讲，此后一切都适用于分隔器 Activity 状态。我不必完全建立圆圈 Activity 状态，因为我想先使分隔线正常工作。有3种StepSize类型，full，halfA和halfB(这是两个列表项，但宽度是完整列表项的一半StepSize)

我将代码放在下面，但是here是可与之一起使用的 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>

最佳答案

即使您有好主意并且清楚地掌握了一些基本的编程概念，您的代码确实也需要一些主要的指导。但是，您的代码缺少的是抽象。

通过抽象，我的意思是很多事情。例如:

无关紧要的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个项目符号处于 Activity 状态，进度条位于第三个项目符号的中间。”向该系统添加三分之二或四分之一的步将变得轻而易举:只需在该列表中添加一些1/3或0.25元素即可!

最少的HTML元素数量:HTML / CSS / JS可能很快变得困惑，所以让我们尝试通过删除尽可能多的元素来减少困惑，以构建进度栏。在您的情况下，不可避免地要使用一个项目符号，但是您可以将每个<div class="divider>"替换为一个基础的基于百分比的进度条，该进度条跨越整个容器，您可以在该容器上调用诸如$('.progress-bar').width('65%');这样的事件。 (奖金:可动画的和响应!是的)

命名空间并对逻辑进行分组:分隔项目符号生成器，步骤更改事件，按钮等。将所有内容模块化，并使用data-attributes(MDN)在DOM元素中存储和管理任意数据。将自定义事件绑定(bind)到元素，并使它们彼此触发。

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