我有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>
我试图添加的是如何显示/隐藏孩子年龄的一种方式,这取决于我有多少孩子这个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) );
}
});
我的问题是,当我改变任何其他行上的孩子时,它会影响第一行的孩子年龄而不是它自己的行
答案 0 :(得分:0)
$('.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) );
}
});