问题描述
我一直在尝试为表单编写 jQuery 代码，以便当用户选择一个单选按钮时，页面会自动滚动到由 frm_opt_container 类包裹的下一个问题
这是我页面的 HTML 结构：
<div class="frm_opt_container">
<div class="frm_radio">
<label>
<input type="radio">
</label>
</div>
<div class="frm_radio">
<label>
<input type="radio">
</label>
</div>
<div class="frm_radio">
<label>
<input type="radio">
</label>
</div>
</div>
这是我写的 jQuery：
//Scroll Function
var option = document.querySelectorAll('label');
for (var i = 0;; i++) {
option[i].addEventListener('click',function() {
var ele = $(this).parents('.frm_opt_container');
setTimeout(function() {
$("html,body").animate({
scrollTop: $(ele).offset().top
},1000);
},200);
});
}
问题：该代码在台式机上运行良好，但当一个问题有两个选项时，它在移动设备上会滚动一点（我在移动设备上将它们显示为块）。 >
这是只包含表单的页面的 reference link。您可以使用带有单选按钮的第一个问题在移动设备上进行测试。
谢谢！
解决方法
$(".frm_radio input").on('change',function() {
var selector = $(this).closest('div').next();
$('html,body').animate({
scrollTop: $(selector).offset().top
},2000);
});
试试这个 jQuery 代码
,这是您想要做的吗？
一旦通过定位 .frm_form_fields 更改/单击单选按钮动画到下一个 $(this).parents(".frm_form_fields").next()：找到输入的 .frm_form_fields 父项并在 DOM 上选择下一个。
$(".frm_radio input").change(function () {
const $target = $(this).parents(".frm_form_fields").next();
if ($target.length < 1) {
return;
}
$("html,body").animate(
{
scrollTop: $target.offset().top
},1000
);
});.container {
padding-bottom: 600px;
}
.frm_radio {
padding: 20px;
margin: 10px;
background: cadetblue;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
<div class="frm_form_fields active">
<fieldset>
<div id="frm_field_8_container" class="frm_form_field form-field frm_required_field frm_top_container hear frm_two_col">
<div id="field_e41hw_label" class="frm_primary_label">How did you hear about us?
</div>
<div class="frm_opt_container" aria-labelledby="field_e41hw_label" role="group">
<div class="frm_radio" id="frm_radio_8-0">
<label for="field_e41hw-0">
<input type="radio" name="item_meta[8]" id="field_e41hw-0" value="Google / Youtube" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false">Google / Youtube
</label>
</div>
<div class="frm_radio" id="frm_radio_8-1">
<label for="field_e41hw-1">
<input type="radio" name="item_meta[8]" id="field_e41hw-1" value="Facebook / Instagram" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false">Facebook / Instagram
</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="frm_form_fields">
<fieldset>
<div id="frm_field_8_container" class="frm_form_field form-field frm_required_field frm_top_container hear frm_two_col">
<div id="field_e41hw_label" class="frm_primary_label">How did you hear about us?
<span class="frm_required" aria-hidden="true"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_e41hw_label" role="group">
<div class="frm_radio" id="frm_radio_8-2"><label for="field_e41hw-2"> <input type="radio" name="item_meta[8]" id="field_e41hw-2" value="Yahoo / Bing" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Yahoo / Bing</label></div>
<div class="frm_radio" id="frm_radio_8-3"><label for="field_e41hw-3"> <input type="radio" name="item_meta[8]" id="field_e41hw-3" value="Email" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Email</label></div>
</div>
</div>
</fieldset>
</div>
<div class="frm_form_fields">
<fieldset>
<div id="frm_field_8_container" class="frm_form_field form-field frm_required_field frm_top_container hear frm_two_col">
<div id="field_e41hw_label" class="frm_primary_label">How did you hear about us?
<span class="frm_required" aria-hidden="true"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_e41hw_label" role="group">
<div class="frm_radio" id="frm_radio_8-4"><label for="field_e41hw-4"> <input type="radio" name="item_meta[8]" id="field_e41hw-4" value="ATM machine" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> ATM machine</label></div>
<div class="frm_radio" id="frm_radio_8-5"><label for="field_e41hw-5"> <input type="radio" name="item_meta[8]" id="field_e41hw-5" value="Another Client" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Another Client</label></div>
<div class="frm_radio" id="frm_radio_8-6"><label for="field_e41hw-6"> <input type="radio" name="item_meta[8]" id="field_e41hw-6" value="ATM" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> ATM</label></div>
</div>
</div>
</fieldset>
</div>
<div class="frm_form_fields">
<fieldset>
<div id="frm_field_8_container" class="frm_form_field form-field frm_required_field frm_top_container hear frm_two_col">
<div id="field_e41hw_label" class="frm_primary_label">How did you hear about us?
<span class="frm_required" aria-hidden="true"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_e41hw_label" role="group">
<div class="frm_radio" id="frm_radio_8-7"><label for="field_e41hw-7"> <input type="radio" name="item_meta[8]" id="field_e41hw-7" value="Billboard" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Billboard</label></div>
<div class="frm_radio" id="frm_radio_8-8"><label for="field_e41hw-8"> <input type="radio" name="item_meta[8]" id="field_e41hw-8" value="Friend / family" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Friend / family</label></div>
<div class="frm_radio" id="frm_radio_8-9"><label for="field_e41hw-9"> <input type="radio" name="item_meta[8]" id="field_e41hw-9" value="I’m a past client" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> I’m a past client</label></div>
</div>
</div>
</fieldset>
</div>
</div> <!-- End of container for all radio buttons -->