javascript - 在循环中检查错误的更改属性

Question

在循环中检查更改的属性时，仅更改第二个和第三个单选按钮

        <input type="radio" name="slides" id="point1" checked>
        <input type="radio" name="slides" id="point2">
        <input type="radio" name="slides" id="point3">


        <script type="text/javascript"> 

            function isChecked () {
                const elem=document.querySelectorAll('[name="slides"]');
                for (let i = elem.length-1; i >-1; i--) {
                    if (elem[i].checked) {
                        elem[i].checked=false;
                            if (i!=2) {
                            elem[i+1].checked=true;
                            }
                            else {
                            document.querySelectorAll('#point1').checked=true;
                            elem[0].checked=true;
                            }
                    }
                }
            }
            setInterval(()=>{isChecked()},2000);
        </script>

我预计变化将从第一变为第三

Answer 1

你没有使用break，我也稍微改变了逻辑:

function isChecked() {
  const elem = document.querySelectorAll('[name="slides"]');
  for (let i = elem.length - 1; i > -1; i--) {
    if (elem[i].checked) {
      elem[i].checked = false;
      elem[(i + 1) % elem.length].checked = true;
      break;
    }
  }
}
setInterval(() => {
  isChecked()
}, 500);

<input type="radio" name="slides" id="point1" checked>
<input type="radio" name="slides" id="point2">
<input type="radio" name="slides" id="point3">

原文:

function isChecked() {
  const elem = document.querySelectorAll('[name="slides"]');
  for (let i = elem.length - 1; i > -1; i--) {
    if (elem[i].checked) {
      elem[i].checked = false;
      if (i != 2) {
        elem[i + 1].checked = true;
      } else {
        document.querySelectorAll('#point1').checked = true;
        elem[0].checked = true;
      }
      break;
    }
  }
}
setInterval(() => {
  isChecked()
}, 500);

<input type="radio" name="slides" id="point1" checked>
<input type="radio" name="slides" id="point2">
<input type="radio" name="slides" id="point3">