Question

我制作了一种幻灯片形式，当用户点击时，下一张图片会滑入，但也必须选中单选按钮。我得到了滑动工作，然后是下一个按钮＆＃39;我的工作也很好，但我有点坚持＆＃39; prev＆＃39;按钮。不知道它为什么不起作用。

这是我到目前为止所获得的，HTML：

<form>
<div>
    <div class="button prev">&#60;</div>
    <ul>
        <li>
            <input type="radio" id="choise_1" name="first_choise" checked="checked"/>
            <label for="choise_1">One</label>
        </li>
        <li>
            <input type="radio" id="choise_2" name="first_choise"/>
            <label for="choise_2">Two</label>
        </li>
        <li>
            <input type="radio" id="choise_3" name="first_choise"/>
            <label for="choise_3">Three</label>
        </li>
    </ul>
    <div class="button next">&#62;</div>
</div>
<div>
    <div class="button prev">&#60;</div>
    <ul>
        <li>
            <input type="radio" id="choise_1" name="second_choise" checked="checked"/>
            <label for="choise_1">One</label>
        </li>
        <li>
            <input type="radio" id="choise_2" name="second_choise"/>
            <label for="choise_2">Two</label>
        </li>
        <li>
            <input type="radio" id="choise_3" name="second_choise"/>
            <label for="choise_3">Three</label>
        </li>
    </ul>
    <div class="button next">&#62;</div>
</div></form>

jQuery的：

$(document).ready(function(){
$('.prev').click(function(){
    $(this).next().find('input:checked').parent().prev().children('input').attr("checked", true);
    $(this).next().find('input:checked').last().removeAttr("checked");
});

$('.next').click(function(){
    $(this).prev().find('input:checked').parent().next().children('input').attr("checked", true);
    $(this).prev().find('input:checked').eq(0).parent().prev().children('input').removeAttr("checked");
});});

Answer 1

可以简化为

$(document).ready(function(){
    $('.prev').click(function(){
        $(this).parent().find('input:checked').parent().prev().children('input').prop("checked", true);
    });

    $('.next').click(function(){
        $(this).parent().find('input:checked').parent().next().children('input').prop("checked", true);
    });
});

演示：Fiddle

相同使用：has-selector

$(document).ready(function(){
    $('.prev').click(function(){
        $(this).parent().find('li:has(input:checked)').prev().children('input').prop("checked", true);
    });

    $('.next').click(function(){
        $(this).parent().find('li:has(input:checked)').next().children('input').prop("checked", true);
    });
});

演示：Fiddle

Answer 2

您可以使用.prop()代替.attr()，您可以简化为：

$(document).ready(function(){
   $('.prev').click(function(){
      $(this).next().find(':checked').parent().prev().find('input').prop("checked", true);
   });

   $('.next').click(function(){
      $(this).prev().find(':checked').parent().next().find('input').prop("checked", true);
   });
});

使用外部按钮选择next / prev单选按钮

2 个答案: