如何显示或隐藏Javascript中的特定元素？

Question

我有即时通讯修改儿童年龄添加到它的每个房间将有成年人WP主题，孩子们&孩子年龄 screenshot

下面这段代码是表中提取多少房有&显示每个输入类型为每房间

<tbody> 
        <?php foreach ($room_ids as $room_id => $available_rooms) : 
         $max_adults = get_post_meta($room_id, '_room_max_adults', true); 
         $max_kids = get_post_meta($room_id, '_room_max_kids', true); 
         if (empty($max_adults) || ! is_numeric($max_adults)) $max_adults = 0; 
         if (empty($max_kids) || ! is_numeric($max_kids)) $max_kids = 0; 
        ?> 
         <tr> 
          <td> 
           <div class="thumb_cart"> 
            <a href="#" data-toggle="modal" data-target="#room-<?php echo esc_attr($room_id) ?>"><?php echo get_the_post_thumbnail($room_id, 'thumbnail'); ?></a> 
           </div> 
           <span class="item_cart"><a href="#" data-toggle="modal" data-target="#room-<?php echo esc_attr($room_id) ?>"><?php echo esc_html(get_the_title($room_id)); ?></a></span> 
           <input type="hidden" name="room_type_id[]" value="<?php echo esc_attr($room_id) ?>"> 
          </td> 
          <td> 
           <div class="numbers-row" data-min="0" data-max="<?php echo esc_attr($available_rooms) ?>"> 
            <input type="text" class="qty2 form-control room-quantity" name="rooms[<?php echo esc_attr($room_id) ?>]" value="<?php echo esc_attr($cart->get_room_field($uid, $room_id, 'rooms')) ?>"> 
           </div> 
          </td> 
          <td> 
           <div class="numbers-row" data-min="0" <?php if (! empty($max_adults)) echo 'data-max="' . esc_attr($max_adults * $available_rooms) . '" data-per-room="' . esc_attr($max_adults) . '"'; ?>> 
            <input type="text" class="qty2 form-control room-adults" name="adults[<?php echo esc_attr($room_id) ?>]" value="<?php echo esc_attr($cart->get_room_field($uid, $room_id, 'adults')) ?>"> 
           </div> 
          </td> 

          <td> 
           <?php if (! empty($max_kids)) : ?> 
           <div class="numbers-row" data-min="0" data-max="<?php echo esc_attr($available_rooms * $max_kids) ?>" data-per-room="<?php echo esc_attr($max_kids) ?>"> 
            <input type="text" class="qty2 form-control room-kids" name="kids[<?php echo esc_attr($room_id) ?>]" value="<?php echo esc_attr($cart->get_room_field($uid, $room_id, 'kids')) ?>"> 
           </div> 
          <td> 
           <div class="numbers-row" data-min="0" data-max="18" data-per-room="<?php echo esc_attr($max_kids) ?>"> 
            <input type="text" id="kid1" class="qty2 form-control room-child_ages1" name="child_ages1[<?php echo esc_attr($room_id) ?>]" value="<?php echo esc_attr($cart->get_room_field($uid, $room_id, 'child_ages1')) ?>"> 
           </div> 
           <div class="numbers-row" id="kid2" data-min="0" data-max="18" data-per-room="<?php echo esc_attr($max_kids) ?>"> 
            <input type="text" class="qty2 form-control room-child_ages2" name="child_ages2[<?php echo esc_attr($room_id) ?>]" value="<?php echo esc_attr($cart->get_room_field($uid, $room_id, 'child_ages2')) ?>"> 
           </div> 
           <div class="numbers-row" id="kid3" data-min="0" data-max="18" data-per-room="<?php echo esc_attr($max_kids) ?>"> 
            <input type="text" class="qty2 form-control room-child_ages3" name="child_ages3[<?php echo esc_attr($room_id) ?>]" value="<?php echo esc_attr($cart->get_room_field($uid, $room_id, 'child_ages3')) ?>"> 
           </div> 
           <div class="numbers-row" id="kid4" data-min="0" data-max="18" data-per-room="<?php echo esc_attr($max_kids) ?>"> 
            <input type="text" class="qty2 form-control room-child_ages4" name="child_ages4[<?php echo esc_attr($room_id) ?>]" value="<?php echo esc_attr($cart->get_room_field($uid, $room_id, 'child_ages4')) ?>"> 
           </div> 
           <?php endif; ?> 
          </td> 
          <td><strong><?php $total = $cart->get_room_field($uid, $room_id, 'total'); if (! empty($total)) echo ct_price($cart->get_room_field($uid, $room_id, 'total')) ?></strong></td> 
         </tr> 
        <?php endforeach; ?> 
       </tbody> 

什么IM尝试添加的是如何显示/隐藏儿童年龄取决于有多少孩子有我做这个JavaScript的方式

$('.room-kids').change(function(){ 

     var $quantity = $(this).closest('tr').find('.room-quantity'); 
     var kids = parseInt($(this).val(),10); 


     var max_kids = 0; 
     if ($(this).parent('.numbers-row').attr('data-per-room')) { 
      if (kids >= 1) { 
     $("#kid1").show("fast"); 

     }else{ 
      $("#kid1").hide("fast"); 
     } 
     if (kids >= 2) { 
     $("#kid2").show("fast"); 
     }else{ 
      $("#kid2").hide("fast"); 
     } 
     if (kids >= 3) { 
     $("#kid3").show("fast"); 
     }else{ 
      $("#kid3").hide("fast"); 
     } 
     if (kids >= 4) { 
     $("#kid4").show("fast"); 
     }else{ 
      $("#kid4").hide("fast"); 
     } 
      max_kids = $(this).parent('.numbers-row').data('per-room'); 
      if ((max_kids * $quantity.val() < kids)) $quantity.val(Math.ceil(kids/max_kids)); 
     } 
    }); 

我的问题是，当我改变任何其他行的孩子是影响孩子的第一行，而不是它自己的行

Answer 1

$('.room-kids').change(function(){ 

    var $quantity = $(this).closest('tr').find('.room-quantity'); 
    var kids = parseInt($(this).val(),10); 


    var max_kids = 0; 
    if ($(this).parent('.numbers-row').attr('data-per-room')) { 
     if (kids == 1) { 
    $("#kid1").show("fast"); 

    }else{ 
     $("#kid1").hide("fast"); 
    } 
    if (kids == 2) { 
    $("#kid2").show("fast"); 
    }else{ 
     $("#kid2").hide("fast"); 
    } 
    if (kids == 3) { 
    $("#kid3").show("fast"); 
    }else{ 
     $("#kid3").hide("fast"); 
    } 
    if (kids == 4) { 
    $("#kid4").show("fast"); 
    }else{ 
     $("#kid4").hide("fast"); 
    } 
     max_kids = $(this).parent('.numbers-row').data('per-room'); 
     if ((max_kids * $quantity.val() < kids)) $quantity.val(Math.ceil(kids/max_kids)); 
    } 
});