javascript - JS 无响应的样式更改

Question

我正在尝试通过“classList.add”将样式更改为组件，但由于某些原因，它适用于前两个元素，而其余的则采用新类。有什么原因会发生这种情况，我该如何解决这个问题？基本上页面中的按钮具有不透明度：0.3，通过选择并回答按钮将从禁用状态变为活动状态，不透明度应为 1

谢谢 这里我的例子：

for (let i = 0; i < option.length; i++) {

  [].forEach.call(opts, (el) => {
    el.addEventListener("click", btnClick, false);
  });
  option[i].addEventListener("click", function() {
    // console.log(option[i])
    // console.log('CLICKED') // click on answer
    move.classList.add("active");
    nextSecond.classList.add("active");
    nextThird.classList.add("active");
    nextFour.classList.add("active");
    nextFive.classList.add("active");
    nextSix.classList.add("active");
    nextSeven.classList.add("active");
  });
}

function btnClick() {
  [].forEach.call(opts, (el) => {
    if (el !== this) el.classList.remove("selected");
  });
  this.classList.add("selected");
  $(".next").removeAttr("disabled");
  $(".nextSecond").removeAttr("disabled");
  $(".nextThird").removeAttr("disabled");
  $(".nextFour").removeAttr("disabled");
  $(".nextFive").removeAttr("disabled");
  $(".nextSix").removeAttr("disabled");
  $(".nextSeven").removeAttr("disabled");
}

.btn {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 42px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.05em;
  color: #4BA21C;
  border: 1px solid black;
  width: 220px;
  border-radius: 23px;
  border: 2px solid #4BA21C;
  height: 46px;
  background-color: white;
  &.btn-left {
    margin-left: -56px;
  }
  &:hover {
    cursor: pointer;
  }
  &.back,
  &.next,
  &.nextSecond,
  &.nextThird.ans.active,
  &.nextFour,
  &.nextFive,
  &.nextSix,
  &.nextSeven {
    width: 116px;
  }
  &.back {
    color: #5C5C5C;
    border: 2px solid #5C5C5C;
    background-color: white;
  }
  &.next,
  &.nextSecond,
  &.nextThird,
  &.nextFour,
  &.nextFive,
  &.nextSix,
  &.nextSeven {
    margin-right: 33px;
    opacity: 0.3;
  }
  &.nextFour,
  &.nextFive,
  &.nextSix {
    margin-right: -14px;
  }
}

.active {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Question Page 3 -->

<div class="questionsPageThree hide">
  <p class="number">3/7</p>
  <div class="second">
    <h1>
      <span>Info</span>mentum
    </h1>
    <p class="hero">
      <span class="start">
                &gt;
            </span> Making change work</p>
  </div>

  <div class="q">
    <div class="left">
      <h2 class="three">3. Do you have someone who you feel comfortable sharing your feelings with?</h2>
    </div>

    <div class="opt">
      <button class="options choosen" type="submit" value="3">
              &check; Yes

            </button>
      <button class="options choosen" type="submit" value="0">
              &#120 No

            </button>
    </div>

    <div class="right">
      <div class="image-right question3"></div>
    </div>
    <section class="q1">
      <button class="btn btn-left back" value="BACK" type="button">
                BACK
            </button>
      <button class="btn btn-right nextThird ans" value="NEXT" type="button" disabled="disabled">
                NEXT
            </button>
    </section>
  </div>
</div>

<!-- Question Page 4 -->

<div class="questionsPageFour hide">
  <p class="number">4/7</p>
  <div class="second">
    <h1>
      <span>Info</span>mentum
    </h1>
    <p class="hero">
      <span class="start">
                &gt;
            </span> Making change work</p>
  </div>

  <div class="q">
    <div class="left">
      <h2>4. How many times this week would you say you felt stressed to the point of worry?</h2>
    </div>

    <div class="opt">
      <button class="options choosen" type="submit" value="3">
                <h4> 0</h4>
                <h6>TIMES</h6>
            </button>
      <button class="options choosen" type="submit" value="0">
                <h4>1 - 2</h4>
                <h6>TIMES</h6>
            </button>
      <button class="options choosen" type="submit" value="-2">
                <h4>3 + </h4>
                <h6>TIMES</h6>
            </button>
    </div>

    <div class="right">
      <div class="image-right question4"></div>
    </div>
    <section class="q1">
      <button class="btn btn-left back" value="BACK" type="button">
                BACK
            </button>
      <button class="btn btn-right nextFour ans" value="NEXT" type="button" disabled="disabled">
                NEXT
            </button>
    </section>
  </div>
</div>

javascript html jquery css class

标签： javascripthtmljquerycss