Question

我目前正在使用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>）。超时每20秒调用nextImage()。 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/

Answer 1

您可以使用css通用兄弟选择器~查找具有特定条件的下一个兄弟。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

我建议您删除单选按钮，如果它们除了显示相应的图像之外没有任何其他目的，只需使用这样的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>

Answer 3

您可以使用这样的计数器：

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>

Answer 4

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>

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

4 个答案: