Wie kann ich bestimmte Elemente in Javascript anzeigen oder verbergen?

Question

ich habe wp Thema, das Kind im Alter von hinzufügen, um es jedes Zimmer im, zu modifizieren würde Erwachsene, Kinder & Kind Alter screenshot

dieser Code unten wird der Tisch holen, wie viele Zimmer gibt & jeden für jeden Eingabetyp zeigen, Zimmer

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

was im Versuch, eine Art und Weise, wie man/Alter verbergen Kinder je nach zeigen hinzuzufügen ist, wie viele Kinder gibt es i

$('.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)); 
     } 
    }); 

dieses Javascript gemacht

mein Problem ist, wenn ich Kinder auf einer anderen Zeile zu ändern es Kinder im Alter von der ersten Reihe statt seine eigenen Reihe

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)); 
    } 
});