jquery - 如何使它成为for循环

Question

我认为它可以进入 for 循环，但我不知道如何表达它？它可以用我，但是如何表达#form+i，不管是#form[i]还是#form{i}，我都试过了，还是不行。

另外，如果用户没有选择某个答案，我希望将“未定义”推送到数组中以避免其空白。

$('#form1').click(function() {
  radioValue = $("input[name='answer1']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form2').click(function() {
  radioValue = $("input[name='answer2']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form3').click(function() {
  radioValue = $("input[name='answer3']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form4').click(function() {
  radioValue = $("input[name='answer4']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form5').click(function() {
  radioValue = $("input[name='answer5']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form6').click(function() {
  radioValue = $("input[name='answer6']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});


$('#form7').click(function() {
  radioValue = $("input[name='answer7']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});
$('#form8').click(function() {
  radioValue = $("input[name='answer8']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form9').click(function() {
  radioValue = $("input[name='answer9']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form10').click(function() {
  radioValue = $("input[name='answer10']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

这是html的一部分。

  <div class="stepShow">
    <!--步驟區塊 -->
    <div class="stepArea stepAreaActive">
      <span><video style="width:300px" id="my_video" src="https://firebasestorage.googleapis.com/v0/b/capstone-daa95.appspot.com/o/real%2Ffake%2F001_870.mp4?alt=media&token=96b7884c-9367-48b9-b422-0e6c238570db"></video></span>
      <form id="form1">
      <p>Choose whether this video is fake or real?
        <input name="answer1" type="radio" name="choice" value="real"> Real
        <input name="answer1" type="radio" name="choice" value="fake"> Fake
      </p>
    </form>

<!--       <a class="pre" onclick="preFun(0)" href="javascript:;">Contact</a>
 -->      <a class="next" onclick="nextFun(0)"  href="javascript:;">Next</a>
    </div>

    <div class="stepArea">
 <span><video style="width:300px" id="my_video" src="https://firebasestorage.googleapis.com/v0/b/capstone-daa95.appspot.com/o/real%2Ffake%2F001_870.mp4?alt=media&token=96b7884c-9367-48b9-b422-0e6c238570db"></video></span>
 <form id="form2">
      <p>Choose whether this video is fake or real?
        <input name="answer2" type="radio" name="choice" value="real" > Real
        <input name="answer2" type="radio" name="choice" value="fake" > Fake
      </p>
    </form>

标签： jquery

Answer 1

我建议将相同的处理函数绑定到所有输入。
这有助于避免重复自己（参见DRY），并可能促进更可维护、更灵活和轻量级的代码。

这是一个例子：

1. change将事件处理程序绑定到所有输入。
2. 当输入发生变化时，遍历所有步骤并找到它们检查的输入。
3. 对于每个步骤，将其检查值（或未定义）添加到数组中。

const $steps = $('.stepArea');
const $inputs = $('.inptAnswer');
const $output = $('#output');
let stepValues = [];

function getStepValues() {
  stepValues = $.map($steps, function(step) {
    return $('.inptAnswer:checked', step).val() || [undefined];
  });
  $output.text(stepValues);
}

$inputs.on('change', getStepValues);

#output {
  margin: 1em 0;
  padding: 1em;
  background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="stepShow">

  <div class="stepArea stepAreaActive">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>

</div>

<div id="output"></div>

---

没有 jQuery，只是为了好玩：

const steps = document.querySelectorAll('.stepArea');
const inputs = document.querySelectorAll('.inptAnswer');
const output = document.getElementById('output');
let stepValues = [];

function getStepValues() {
  stepValues = Array.from(steps).map((step) => {
    let input = step.querySelector('.inptAnswer:checked');
    return input ? input.value : undefined;
  });
  output.innerHTML = stepValues;
}

inputs.forEach((input) => {
  input.addEventListener('change', getStepValues);
});

#output {
  margin: 1em 0;
  padding: 1em;
  background: lightblue;
}

<div class="stepShow">

  <div class="stepArea stepAreaActive">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>

</div>

<div id="output"></div>