Question

我在一个可以预订酒店的网站上工作。房间是单人，双人和共享的房间。如您在照片中看到的，我需要有一个JavaScript代码，用于选择单人和双人间的情况下可用于更改“房间数”，而如果选择单人间或双人房，则可用于更改“人数”共享房间。以下代码摘自WooCommerce插件的一部分。我在代码部分放入了标签名称以及与以下预订表格相关联的扩展代码。请帮我。代码JavaScript应该是包含共享室选项（.includes（“ shared room”））的书面代码，因为每个酒店或旅馆的价格都不同。

”“因为该网站由WordPress管理，因此您需要将javascript代码导入到Function.php文件中。这些代码应在包含booking.php的页面上实施。”

/* My JavaScript */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
        $(document).ready(
            function () {
                $('select[id=wc_bookings_field_resource]').change(
                    function () {
                        var newText = $('option:selected', this).text();
                        if (newText.includes(Shared room) {
                            $('#').text('Number of Persons');//????
                        } else {
                            $('#').text('Number of Rooms');//????
                        }

                    }
                );
            }
        );
</script>



/* part of the WooCommerce */
<?php   

    private function persons_field() {
        // Persons field
        if ( $this->product->has_persons() ) {

            // Get the max persons now to use for all person types
            $max_persons = $this->product->get_max_persons() ? $this->product->get_max_persons() : '';

            if ( $this->product->has_person_types() ) {
                $person_types = $this->product->get_person_types();

                foreach ( $person_types as $person_type ) {
                    $min_person_type_persons = $person_type->get_min();
                    $max_person_type_persons = $person_type->get_max();

                    $this->add_field( array(
                        'type'  => 'number',
                        'step'  => 1,
                        'min'   => is_numeric( $min_person_type_persons ) ? $min_person_type_persons : 0,
                        'max'   => ! empty( $max_person_type_persons ) ? absint( $max_person_type_persons ) : $max_persons,
                        'name'  => 'persons_' . $person_type->get_id(),
                        'label' => $person_type->get_name(),
                        'after' => $person_type->get_description(),
                    ) );
                }
            } else {
                $this->add_field( array(
                    'type'  => 'number',
                    'step'  => 1,
                    'min'   => $this->product->get_min_persons(),
                    'max'   => $max_persons,
                    'name'  => 'persons',
                    'label' => __( 'Number of Persons/Rooms' , 'woocommerce-bookings' ),
                ) );
            }
        }
    }

/* a part of Html */
<label for="wc_bookings_field_persons">Persons/Rooms:</label>
<input type="number" value="1" step="1" min="1" max="10" name="wc_bookings_field_persons" id="wc_bookings_field_persons"> 

<label for="wc_bookings_field_resource">Type of Rooms:</label>
<select name="wc_bookings_field_resource" id="wc_bookings_field_resource">
    <option value="20996">Single room (+€30,00 per day)</option>
    <option value="20997">Double room (+€40,00 per day)</option>
    <option value="21327">Shared room (+€20,00 per day)</option>
</select>

Answer 1

我的问题仅通过在Internet上进行少量搜索即可解决。要将JavaScript命令添加到程序中，只需将代码添加到functions.php文件中。

function wpb_hook_javascript() {
?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <script>
                $(document).ready(
                    function () {
                        $('select[id=wc_bookings_field_resource]').change(
                            function () {
                                var newText = $('option:selected', this).text();
                                if (newText.includes('Shared room')) {
                                    $("label[for='wc_bookings_field_persons']").text('Persons:');
                                } else {
                                    $("label[for='wc_bookings_field_persons']").text('Rooms:');
                                }
                            }
                        );
                    }
                );
        </script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');

如何通过选择组合框来更改标签文本值

1 个答案: