Question

我正在使用单选按钮创建一个小型动态调查，当我回答一个问题时，我正在尝试滚动到下一个问题。

调查是这样建立的（基本调查）

<section class='question'>
    <h2>Title of the question</h2>
    <ul>
        <li><input type="radio" class='choice'>Answer 1</li>
        <li><input type="radio" class='choice'>Answer 2</li>
        <li><input type="radio" class='choice'>Answer 3</li>
    </ul>
</section>

动画的脚本位于

之下

<script>
$(".choice").click(function() {
var next;
next = $(this).parent().next().find(".choice");
$("html, body").delay(1000).animate({scrollTop: next.offset().top}, 2000);
});
</script>

当选择答案1或2时，它可以很好地工作，但它对答案3不起作用。控制台说＆＃34; next＆＃34;未定义。

有什么想法吗？

感谢您的帮助

Answer 1

我猜你有无线电答案的多个问题，当你点击收音机输入时，你需要滚动到下一个问题。在这种情况下，您可以在单选按钮上查看更改事件。当您获得更改事件时，您将获得答案的容器，然后使用.next()来获取下一个问题。如果有下一个问题，您可以通过一个很好的动画过渡滚动到它。

<强> JS：

$('.choice').on('change', function() {
    var nextQuestion = $(this).closest('.question').next();

    if (nextQuestion.length !== 0) {
        $('html, body').animate({
            scrollTop: nextQuestion.offset().top
        }, 1000);
    }
});

这是JSFiddle：http://jsfiddle.net/hzda8e57/

使用scrollTop滚动到下一个元素进行调查 - JQuery

1 个答案: