Javascript 如何使用jquery显示基于输入类型数字字段数据的另一个字段？_Javascript_Jquery_Css_Wordpress

Javascript 如何使用jquery显示基于输入类型数字字段数据的另一个字段？

javascript jquery css wordpress

Javascript 如何使用jquery显示基于输入类型数字字段数据的另一个字段？,javascript,jquery,css,wordpress,Javascript,Jquery,Css,Wordpress,在Woocomece中，我试图根据子字段数据显示子年龄字段的编号。默认情况下，我将使用css隐藏此子年龄框。我希望根据子字段中给出的数据显示子年龄字段的编号。我如何使用jquery执行此操作？任何建议都应该对我有用 1）子字段的代码 <div class="yith-wcbk-form-section yith-wcbk-form-section-person-types"> <label for="yith-wcbk-booking-persons-type-390">

在Woocomece中，我试图根据子字段数据显示子年龄字段的编号。默认情况下，我将使用css隐藏此子年龄框。我希望根据子字段中给出的数据显示子年龄字段的编号。我如何使用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>

工作正常，但在wordpress中不起作用…


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

$（函数（）{
$（'小年龄'）.val（“4”）；
$（'中年'）.val（“12”）；
});
第一年龄
小孩

纯js方法

document.getElementById（“创建”）.onclick=CreateBoxs；
函数createBox（）{
让childNums=document.getElementById（“childNum”）.value；
log（“childNums”，childNums）
对于（i=1；i第一种方式：--

$（“#行业”）。关于（'change'，function（）{
var selection=$（this.val（）；
console.log（“检测到的更改…”+选择）；
$（“#SaaSMeetings”）.toggle（$（this.val（）=“age”）；
})；

小孩
挑选
1.
我希望您创建一个名为“active”的新类，并放置显示块；如以下代码所示
.active{
            display: block;
        }
#yith-wcbk-booking-persons-type-450{
    display: none;
    }
#yith-wcbk-booking-persons-type-451{
    display: none;
    }
#yith-wcbk-booking-persons-type-452{
    display: none;
    }
#yith-wcbk-booking-persons-type-453{
    display: none;
    }

然后在JQuery中的show（）
中使用addClass（'active'）

代码如下所示
jQuery('#yith-wcbk-booking-persons-type-390').change(function(){
    if(jQuery(this).val() === '1') {
        jQuery('#yith-wcbk-booking-persons-type-450').addClass('active');
    }
    if(jQuery(this).val() === '2') {
        jQuery('#yith-wcbk-booking-persons-type-450').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-451').addClass('active');
    }
    if(jQuery(this).val() === '3') {
        jQuery('#yith-wcbk-booking-persons-type-450').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-451').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-452').addClass('active');
    }
    if(jQuery(this).val() === '4') {
        jQuery('#yith-wcbk-booking-persons-type-450').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-451').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-452').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-453').addClass('active');
    }
});

你能试试这个jQuery代码片段吗
我想这样行得通：
不：首先，无需始终使用jQuery
您可以将其定义为变量。

希望这会有帮助。
Hello@Abhee这是我使用jquery最简单的解决方案。请查看
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Testin script</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
    <label>
        Child</label>
    <input value="1" type="number" onchange="update_child(this);">
  </div>

  <div id="childs">
    <label>1 child</label>
    <input value="" type="number">
  </div>

  <script type="text/javascript">
    function update_child(me){
      var num_child = $(me)[0].value;
      var child = "";
      for(var i=0;i<num_child;i++){
        child += '<label>'+(i+1)+' child</label><input value="" type="number"><br>';
      }
      $("#childs")[0].innerHTML = child;
    }
  </script>
</body>
</html>


睾丸脚本
小孩
一个孩子
函数更新\u子对象（me）{
var num_child=$（me）[0]。值；
var child=“”；
对于（var i=0；i你好，这里是正确的代码，它工作正常
这是链接

HTML
主要的投入应该是什么
value="0"

像这样
<input id="yith-wcbk-booking-persons-type-389" name="person_types[389]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="1" max="4" data-person-type-id="389" value="0" type="number">

JQuery
$(function() {

$('#yith-wcbk-booking-persons-type-389').change(function() {

var input = $('#yith-wcbk-booking-persons-type-389').val();

        if (input == "1") {
                    $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').hide();
        $('#yith-wcbk-booking-persons-type-452').hide();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if (input == "2"){
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').hide();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if (input == "3"){
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').show();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if (input == "4"){
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').show();
        $('#yith-wcbk-booking-persons-type-453').show();
    }

});
});

这个js做什么？不客气！
value="0"

<input id="yith-wcbk-booking-persons-type-389" name="person_types[389]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="1" max="4" data-person-type-id="389" value="0" type="number">

#yith-wcbk-booking-persons-type-450{
    display: none;
    }
#yith-wcbk-booking-persons-type-451{
    display: none;
    }
#yith-wcbk-booking-persons-type-452{
    display: none;
    }
#yith-wcbk-booking-persons-type-453{
    display: none;
    }

$(function() {

$('#yith-wcbk-booking-persons-type-389').change(function() {

var input = $('#yith-wcbk-booking-persons-type-389').val();

        if (input == "1") {
                    $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').hide();
        $('#yith-wcbk-booking-persons-type-452').hide();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if (input == "2"){
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').hide();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if (input == "3"){
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').show();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if (input == "4"){
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').show();
        $('#yith-wcbk-booking-persons-type-453').show();
    }

});
});