javascript - 如何使用jquery根据输入类型数字字段数据显示另一个字段？

Question

在 woocomerce 我试图显示没有。根据子字段数据提交的 child 年龄。默认情况下，我将使用 css 隐藏此 child 年龄框。我想显示否。基于 child 字段中给出的数据的 child 年龄框。我如何使用 jquery 做到这一点？任何建议应该对我有用

1) 子字段代码

<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-390">
    Child</label>
<input id="yith-wcbk-booking-persons-type-390" name="person_types[390]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="4" data-person-type-id="390" value="" type="number">
</div>

2)年龄字段代码(第一个年龄字段)

<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-450">
    1st age</label>
<input id="yith-wcbk-booking-persons-type-450" name="person_types[450]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="12" data-person-type-id="450" value="" type="number">
</div>

3)使用了这个js，但不起作用

jQuery('#yith-wcbk-booking-persons-type-390').change(function(){
    if(jQuery(this).val() === '1') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
    }
    if(jQuery(this).val() === '2') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
        jQuery('#yith-wcbk-booking-persons-type-451').show();
    }
    if(jQuery(this).val() === '3') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
        jQuery('#yith-wcbk-booking-persons-type-451').show();
        jQuery('#yith-wcbk-booking-persons-type-452').show();
    }
    if(jQuery(this).val() === '4') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
        jQuery('#yith-wcbk-booking-persons-type-451').show();
        jQuery('#yith-wcbk-booking-persons-type-452').show();
        jQuery('#yith-wcbk-booking-persons-type-453').show();
    }
});

This code工作正常，但在 WordPress 中不起作用...

Answer 1

<script type="text/javascript" language="javascript">
    $(function() {
        $('.small-age').val("4");
        $('.medium-age').val("12");
    });
</script> 
<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-450">
    1st age</label>
<input id="yith-wcbk-booking-persons-type-450" name="person_types[450]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="12" data-person-type-id="450" value="" type="number">
</div>
<div class="medium-age yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-390">
    Child</label>
<input id="yith-wcbk-booking-persons-type-390" name="person_types[390]" class="small-age yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="4" data-person-type-id="390" value="" type="number">
</div>