jQuery 在匹配的单选按钮中选择下一个单选按钮

jQuery select next radio-button in matched radio-buttons

本文关键字：单选按钮 下一个 选择 jQuery      更新时间：2023-09-26

我目前正在努力使用jQuery，因为我觉得有些概念缺乏我习惯于PHP或C等语言的概念。我（还）无法找到足够的替代品，所以我可能需要一些支持。

我想做的是简单地检查匹配单选按钮的jQuery列表中的下一个单选按钮。背景：这些单选按钮通过CSS隐藏，但每个按钮代表一个图像，当选中特定的单选按钮时，该图像通过HTML/CSS显示。

这是我到目前为止得到的：

var imageRadios = $('input[type="radio"][name="image-select"]');
function nextImage() {
    var nextImage = imageRadios.filter(':checked').eq(0).prop('checked', false).index(imageRadios) + 1;
    imageRadios.eq(nextImage).prop('checked', true);
}

在页面加载时，第一个单选按钮被检查为硬编码 （ <input ... checked> ）。 nextImage()每 20 秒通过超时调用一次。nextImage()的第一次调用工作正常（选中下一个单选按钮），但是当第二次调用它时，它会取消选中第二个单选按钮并再次检查第一个单选按钮。第一个和第二个单选按钮之间的这种切换无休止地发生。 console.log(nextImage);在第一个功能行之后给出1或0。

提前感谢您对此方法的帮助或对任何其他方法的广泛提示！

注意：我知道，一旦到达列表的末尾，此函数还不会处理从最后一个元素到第一个元素的跳转。

编辑 1：相关 HTML（由 PHP 动态生成），如要求：

<input type="radio" name="image-select" id="image-0" checked>
<div class="image">...</div>
<input type="radio" name="image-select" id="image-1">
<div class="image">...</div>
<input type="radio" name="image-select" id="image-2">
<div class="image">...</div>
<input type="radio" name="image-select" id="image-3">
<div class="image">...</div>
...

编辑 2：根据请求的 JSFiddle：https://jsfiddle.net/y7p7L68b/

您可以使用

css 通用同级选择器~查找具有特定条件的下一个同级。

var radioSelector = 'input[type="radio"][name="image-select"]';
var imageRadios = $(radioSelector);
function nextImage() {
    var nextImage = imageRadios.filter(':checked ~ ' + radioSelector)[0];
    $(typeof nextImage !== 'undefined' ? nextImage : imageRadios[0]).prop('checked', true);
}
setInterval(nextImage, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="image-select" id="image-0" checked>
<div class="image">...</div>
<input type="radio" name="image-select" id="image-1">
<div class="image">...</div>
<input type="radio" name="image-select" id="image-2">
<div class="image">...</div>
<input type="radio" name="image-select" id="image-3">
<div class="image">...</div>

var imageRadios = $('input[type="radio"][name="image-select"]');
function nextImage() {
    var nextImage = imageRadios.filter(':checked').prop('checked', false);
		var ind = imageRadios.index(nextImage);
    ++ind;
    if(ind >= imageRadios.length)ind = 0;
    imageRadios.eq(ind).prop('checked', true);
}
setInterval(nextImage, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="image-select" id="image-0" checked>
<div class="image">1...</div>
<input type="radio" name="image-select" id="image-1">
<div class="image">2...</div>
<input type="radio" name="image-select" id="image-2">
<div class="image">3...</div>
<input type="radio" name="image-select" id="image-3">
<div class="image">4...</div>

我建议你应该删除单选按钮，如果它们除了显示相应的图像之外没有任何其他目的，并且只使用这样的div：

// Set any timeout in ms
var time = 1000;
var divs = $('.img-holder');
function toggleImg(index) {  
  divs.hide();    
  divs.eq(index).show();  
  if (index === divs.length) {
    toggleImg(0);    
  } else {
    setTimeout(function() { toggleImg(index + 1); }, time);
  }  
}
toggleImg(0);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="img-holder">img-1</div>
<div class="img-holder">img-2</div>
<div class="img-holder">img-3</div>
<div class="img-holder">img-4</div>

您可以使用如下计数器：

var imageRadios = $('input[type="radio"][name="image-select"]');
var nextImage = (function(elements) {
    var current = 0, length = elements.length;
    return function () {
        current = current%length;
        elements.eq(current).prop('checked', false);
        elements.eq(current++).prop('checked', true);
    };
})(imageRadios);
setInterval(nextImage, 1000);


var imageRadios = $('input[type="radio"][name="image-select"]');
var nextImage = (function(elements) {
    var current = 0, length = elements.length;
    return function () {
        current = current%length;
        elements[current].checked = false;
        elements[current++].checked = true;
    };
})(imageRadios);
setInterval(nextImage, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="image-select" id="image-0" checked>
<div class="image">...</div>
<input type="radio" name="image-select" id="image-1">
<div class="image">...</div>
<input type="radio" name="image-select" id="image-2">
<div class="image">...</div>
<input type="radio" name="image-select" id="image-3">
<div class="image">...</div>

相关文章：