javascript - 基于对象属性的点击事件添加和删除事件类到进度条

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 )

我会把我的代码放在下面，但是 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>

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%'); . (奖励:动画和响应!耶)
• 命名空间并对您的逻辑进行分组:将元素符号生成器、步骤更改事件、按钮等分开。将所有内容模块化并使用 data-attributes (MDN) 在您的 DOM 元素中存储和管理任意数据。将自定义事件绑定(bind)到元素并使它们相互触发。

这是我将如何解决您的问题的示例:JSBin .