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＆amp; halfB（这是两个列表项但具有完整列表项StepSize的宽度的一半）

我会在下面放置我的代码，但here是 JSbin 可以使用，我还会附上预期互动的图表。另外，请随意调整StepSize属性以测试不同的顺序，但请记住halfA StepSize必须始终跟随halfB。

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

progress bar diagram

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）
命名空间并对您的逻辑进行分组：分离项目符号构建器，步骤更改事件，按钮等。使所有内容模块化并使用data-attributes（MDN）来存储和管理任意数据在你的DOM元素中。将自定义事件绑定到元素并使它们互相激发。

这是我如何解决您的问题的示例：JSBin。

根据基于对象属性的单击事件向活动类添加和删除活动类

1 个答案: