javascript - 获取 id 并将其设置为 IF 加载 Progress-Bar 的条件

Question

好吧，所以我的问题是...得到一个 ProgressBar 并希望它加载。 现在我已经实现了这一点，在我想到为什么不从 HTML 中获取一个 ID 并将其作为加载栏的 IF 语句的条件。

我为如何做到这一点而奋斗了一个星期，但没有成功......有些东西我看不到......有些东西但仍然无法到达那里。它在 Javascript 上用了 2 个月，所以不要过多地使用 PhD 短语 :)

我尝试使用 getAtribute、.value 从一些带有 for 循环的 id，但这只是想多了。一些数组 [i] 应该能够做到这一点。或者？

<div class="progress">
  <div class="progress-bar" id="html" role="progressbar" style="width: 0%;">0/10</div>
</div>
<br><br>
CSS
<div class="progress">
  <div class="progress-bar" id="css" role="progressbar" style="width: 0%;" >0/10</div>
</div>
<br><br>
Javascript
<div class="progress">
  <div class="progress-bar" id="javascript" role="progressbar" style="width: 0%;">0/10</div>
</div>
<br><br>
Visual Studio
<div class="progress">
  <div class="progress-bar" id="visual_st" role="progressbar" style="width: 0%;">6/10</div>
</div>
<br><br>
SQL
<div class="progress">
  <div class="progress-bar" id="sql" role="progressbar" style="width: 0%;">7/10</div>
</div>
</div>
</div>

// this javascript works 
function () {
  var bar = document.getElementsByClassName("progress-bar");         
  if (bar.width() >= 500) {
    clearInterval(progress);
  } else {
    bar.width(bar.width() + 100);
  }
}

现在是我不能做的部分，现在我正在尝试 switch 语句。

function () {
  var bar = document.getElementsByClassName("progress-bar");
  var x = document.getElementsByClassName("progress-bar")[a].getAttribute("id");

  switch (x[a]){
    case 'html':
      if (bar.width() >= 500) {
        clearInterval(progress);
      } else {
        bar.width(bar.width() + 100);
      }
      break;
    default:
      break;
  }
}

Answer 1

让我们指出一些事情，因为这将最大程度地帮助您理解代码的一些关键问题:

function () { // no function name

  var bar = document.getElementsByClassName("progress-bar"); 
  // 'bar' is a generic term, alonside 'foo', might want to use something like 'progressBar'
  // also, document.getElementsByClassName() returns a HTML Collection - somewhat like an array
  // bar.width() will not work, as you are not applying it to an element, but to an array

  var x = document.getElementsByClassName("progress-bar")[a].getAttribute("id");
  // 'a' is not defined - it shouldbe an index of some sort
  // if it were to work it would return a string - the value of the id itself
  // the id is not meant to be used as such - better use a 'data-attribute' instead

  switch (x[a]){ 
  // x is a string, as mentioned above
  // x[index] will return the letter within the string, at that index;
  // example: 'mystring'[3] - will give you 't', the 4th letter
  // the same result is for: var z ='mystring'; z[3] - will give you 't', the 4th letter
  // x[a] will never return 'html' - as it is a single letter

    case 'html':
    // this will never run - as x[a] returns a single letter/digit 
    // you cannot write 'HTML' with only one letter/digit :)

      // as mentioned above, bar is a HTML Collection, not an element - bar.width() will not work
      if (bar.width() >= 500) {
        clearInterval(progress); 
        // progress is not defined within your posted code, just saying for future posts 
      } else {
        bar.width(bar.width() + 100);
      }
      break;

      // Also, a micro-optimization: you are getting bar.width() twice
      // store it and use the stored value instead of checking it again, just to get the same result

      // long story short, you could change it with :
      // var currentWidth = bar.width();
      // if (currentWidth >= 500) {
      //   clearInterval(progress);
      // } else {
      //   bar.width(currentWidth + 100);
      // }
      // break;

    default:
      // as there is only one case (if x[a]==='html') - which never runs, then the 'default' will always run
      // the 'default' has no code within it - so it will always run .. no code
      break;
  }
};

更接近工作函数的是:

function (myIndex) {
  var allProgressBars = document.getElementsByClassName("progress-bar");
  var targetProgressBar = allProgressBars[myIndex];
  var targetIdValue = targetProgressBar.getAttribute("id");
  var currentWidth = targetProgressBar.width();

  switch (targetIdValue){

    case 'html':
      if (currentWidth >= 500) {
        clearInterval(progress); // still need to define 'progress' 
      } else {
        bar.width(currentWidth + 100);
      }
      break;

    default:
      break;
  }
};

更接近工作功能 + 甚至更好:

改变:

<div class="progress-bar" id="html" ...>

收件人:

<div class="progress-bar" data-value="html" ...>

---

function (myIndex) {
  var allProgressBars = document.getElementsByClassName("progress-bar");
  var targetProgressBar = allProgressBars[myIndex];
  var targetValue = targetProgressBar.getAttribute("data-value");
  var currentWidth = targetProgressBar.width();

  switch (targetValue){

    case 'html':
      if (currentWidth >= 500) {
        clearInterval(progress); // still need to define 'progress' 
      } else {
        bar.width(currentWidth + 100);
      }
      break;

    default:
      break;
  }
};

祝你好运! :)