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

Question

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

由于该站点由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

我的问题很简单，只要在互联网上搜索一下就可以解决。要将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');