javascript - 自动选择嵌套在循环中的 li 内的单选按钮

Question

首先，这是我在 SO 中的第一个问题，我还是个菜鸟。

我正在尝试应用此 jquery 代码片段(我从其他 SO 答案中找到。

基本上，它与我试图实现的功能相同，但标记结构不同，因为我的 html 结构中的输入嵌套在 li 中。 此外，任何人都可以解释“% 3”在这部分代码中的作用 .eq( ( $('input:checked').index() + 1 ) % 3 )

  setInterval(function(){
     $('input').eq( ( $('input:checked').index() + 1 ) % 3 ).prop('checked', true);
  },1000);

<ul>
  <li>
    <label for="test-1">
      <input id="test-1" type="radio" name="testing" checked />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-2">
      <input id="test-2" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-3">
      <input id="test-3" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
</ul>

注意:无法更改标记结构，因为这是我正在使用的 wp 插件输出其数据的方式。

Answer 1

can anyone explain what does "% 3" do in this part of code
.eq( ( $('input:checked').index() + 1 ) % 3 )

这更多的是关于数学而不是编码，但让我们解释一下。

% 符号是一个名为 "modulo" 的数学运算符.
它是除法的剩余部分。

假设 7/2 = 3.5

这里的模数是 1。因为除法给出的是 3 作为“完整”数字，所以商。
那是可以在不“切割”部分(小数)的情况下划分的部分......想想苹果。

所以 2 乘以 3 得到 6...

与原来的数字相差多少？
这就是模数。

var number = 7;
var dividor = 2;

// Quotient
var quotient = Math.floor(number/dividor);
console.log(quotient);

// Modulo
var modulo = number%dividor;
console.log(modulo);

// Back to number...
var number2 = (quotient*dividor)+modulo;
console.log(number2);

console.log(number == number2);

现在你的代码示例有什么用，一步一步:

尝试获取 $('input:checked').index()...
并且将 1 添加到下一个目标。
然后，我们得到该索引的模数 3。

现在无论点击哪个单选按钮(索引 0,1 或 2)，模数始终为 1。
因为 .index() 在元素上使用并且没有传递给方法的参数返回«一个整数，指示第一个元素在 jQuery 对象中相对于其兄弟元素的位置»。在这种情况下，它在标记的 label 中没有兄弟。

这是您未修改的代码段，但加载了 jQuery 库，并为等式的每个部分加载了一些控制台日志:

setInterval(function(){
    $('input').eq( ( $('input:checked').index() + 1 ) % 3 ).prop('checked', true);
     
    console.log( $('input:checked').index() );
    console.log( ($('input:checked').index() + 1 )  );
    console.log( ($('input:checked').index() + 1 ) % 3 );
    console.log( "=====================================" );
     
  },1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label for="test-1">
      <input id="test-1" type="radio" name="testing" checked />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-2">
      <input id="test-2" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-3">
      <input id="test-3" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
</ul>

---

.index()的使用

如果你想循环输入，你可以使用.index()，但是通过将选中的元素作为参数传递给应用于集合的方法所有输入。

setInterval(function(){

  var indexOfChecked = $('input').index($("input:checked"));

  $('input').eq( ((indexOfChecked +1) %3 )).prop('checked', true);

  console.log( indexOfChecked );
  console.log( (indexOfChecked +1) );
  console.log( ((indexOfChecked +1) %3) );
  console.log( "=====================================" );

},1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label for="test-1">
      <input id="test-1" type="radio" name="testing" checked />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-2">
      <input id="test-2" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-3">
      <input id="test-3" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
</ul>

同样的事情可以使用 .each() 找到检查输入的索引，使用每个循环的索引来实现:

setInterval(function(){

  var indexOfChecked = 0;

  $('input').each(function(index){
    if( $(this).is(":checked") ){
      indexOfChecked = index;
    }
  });

  $('input').eq( ((indexOfChecked +1) %3 )).prop('checked', true);

  console.log( indexOfChecked );
  console.log( (indexOfChecked +1) );
  console.log( ((indexOfChecked +1) %3) );
  console.log( "=====================================" );

},1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label for="test-1">
      <input id="test-1" type="radio" name="testing" checked />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-2">
      <input id="test-2" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-3">
      <input id="test-3" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
</ul>

%的使用

这里是为了确保 .eq() 中使用的数字始终在现有元素的“范围内”。
使用条件可以实现同样的事情:

if( indexOfChecked > $('input').length-1 ){
  indexOfChecked = 0;
}

所以你的问题最终是关于%和关于.index()使用的数学。
jQuery 中有一些棘手的变化，例如这个微妙的变化……您只需要了解它们即可。

.index() documentation .
.eq() documentation .