0

私は本質的にシンプルなプログレスバーを作成しています。4 つのセクションがあり、各セクションの上にプログレス バーがあります。たとえば、セクション 2 の進行状況バーでは、ステップ 1 が緑色で強調表示されます。セクション 3 の進行状況バーでは、ステップ 1 と 2 が緑色で強調表示されます。

クラス step-incomplete は、背景が異なるだけで step-complete と同じです。

現時点では、いくつかの問題があります。各 div のヘッダーを参照する方法がわかりません。何をしても、何も得られないか、[object HTMLHeadingElement] が得られます。ループ自体は問題ありませんが、特定の div で特定のヘッダーのクラス名を変更する方法が見つかりません。

コードは以下のとおりです。

<html>

<head>
  <style type="text/css">
    .step-complete {
      display: inline;
      border-style: hidden;
      background: green;
    }
    .step-incomplete {
      display: inline;
      border-style: hidden;
      background: none;
    }
  </style>

  <script type="text/javascript">
    var numOfSections = 4;

    function changeColour() {
      for (i = 1; i <= numOfSections; i++) {
        if (i != 1) {
          alert(i);
          var progress = document.getElementById('progress-' + i).id;
          alert(progress);
          for (j = i - 1; j >= 1; j--) {
            alert(j);
            var header = document.getElementsByName("step-" + j);
            alert(progress.header.className);

          }
        }
      }
    }

    window.onload = function() {
      changeColour();
    };
  </script>
</head>

<body>

  <button id="push" onclick="changeColour()">click me</button>


  <div id="progress-1">
    <h1 name="step-1" class="step-incomplete">Step1</h1>
    <h1 name="step-2" class="step-incomplete">Step2</h1>
    <h1 name="step-3" class="step-incomplete">Step3</h1>
    <h1 name="step-4" class="step-incomplete">Step4</h1>
  </div>
  <h1 id="header1">Header1</h1>
  <p>..................
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
  </p>

  <div id="progress-2">
    <h1 name="step-1" class="step-incomplete">Step1</h1>
    <h1 name="step-2" class="step-incomplete">Step2</h1>
    <h1 name="step-3" class="step-incomplete">Step3</h1>
    <h1 name="step-4" class="step-incomplete">Step4</h1>
  </div>
  <h1 id="header2">Header2</h1>
  <p>..................
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
  </p>

  <div id="progress-3">
    <h1 name="step-1" class="step-incomplete">Step1</h1>
    <h1 name="step-2" class="step-incomplete">Step2</h1>
    <h1 name="step-3" class="step-incomplete">Step3</h1>
    <h1 name="step-4" class="step-incomplete">Step4</h1>
  </div>
  <h1 id="header3">Header3</h1>
  <p>..................
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
  </p>

  <div id="progress-4">
    <h1 name="step-1" class="step-incomplete">Step1</h1>
    <h1 name="step-2" class="step-incomplete">Step2</h1>
    <h1 name="step-3" class="step-incomplete">Step3</h1>
    <h1 name="step-4" class="step-incomplete">Step4</h1>
  </div>
  <h1 id="header4">Header4</h1>
  <p>..................
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
  </p>

</body>

</html>

最終的な目標は、次の図に示されています。

最終目標のイメージ

4

3 に答える 3

0

querySelectorループしている div だけに検索を含めることができるように使用する必要があります

function changeColour() {
  for (var i = 1; i <= numOfSections; i++) {
    if (i != 1) {
      alert(i);
      var progress = document.getElementById('progress-' + i).id;
      alert(progress);
      for (var j = i - 1; j >= 1; j--) {
        // Instead of querying the whole document, query just the current div
        var header = progress.querySelector("h1[step-" + j + "]");
        alert(progress.header.className);


      }
    }
  }
}

h1または、のリスト全体を取得して、それらを反復処理することもできます

  var h1s = progress.querySelectorAll('h1');
于 2016-04-06T13:46:27.197 に答える