Как использовать Javascript, чтобы первый столбец отображался для всех параметров, выбранных в раскрывающемся меню? - PullRequest
Новая
       33

Как использовать Javascript, чтобы первый столбец отображался для всех параметров, выбранных в раскрывающемся меню?

0 голосов
/ 10 февраля 2019

Довольно простой вопрос от новичка здесь.Мне нужна ваша помощь в изменении JavaScript в приведенном ниже коде, чтобы первый столбец (id = "First Column") отображался слева для всех выбранных параметров.Я искал несколько тем и сайтов, но не смог взломать это.

Также хотел бы знать, будет ли код Javascript лучше взломать это или Jquery будет лучше, если мне нужно использовать это наWordPress сайт.Большинство людей, предлагающих JS лучший вариант для Wordpress, задавались вопросом о том же.

Я уверен, что это довольно простой запрос, и любая помощь с этим была бы очень признательна.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
            <select>

        <div id="First Column" class="inv">
                <ul class="cd-features-list">
                        <li>Dis</li>
                        <li>Wea</li>
                        <li>Tra</li>
                    </ul>
        </div>
        <div id="content_1" class="inv">Option 1
                <ul class="cd-features-list">
                        <li>Option 1 Dis</li>
                        <li>Option 1 Wea</li>
                        <li>Option 1 Tra</li>
                    </ul>            
        </div>
        <div id="content_2" class="inv">Option 2
            <ul class="cd-features-list">
                <li>Option 2 Dis</li>
                <li>Option 2 Wea</li>
                <li>Option 2 Tra</li>
            </ul>           
        </div>
        <div id="content_3" class="inv">Option 3
            <ul class="cd-features-list">
                <li>Option 3 Dis</li>
                <li>Option 3 Wea</li>
                <li>Option 3 Tra</li>
            </ul>      
        </div>
        <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementById(this.value);
                    if (vis !== null) {
                        vis.className = 'inv';
                    }
                    if (target !== null ) {
                        target.className = 'vis';
                    }
            });
        </script>
        
    </body>
</html>

1 Ответ

0 голосов
/ 10 февраля 2019

Я не думаю, что вам нужен jQuery для этой конкретной проблемы.Проверьте обновленный скрипт ниже. 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
            <select>

        <div id="First Column" class="inv">
                <ul class="cd-features-list">
                        <li>Dis</li>
                        <li>Wea</li>
                        <li>Tra</li>
                    </ul>
        </div>
        <div id="content_1" class="inv">Option 1
                <ul class="cd-features-list">
                        <li>Option 1 Dis</li>
                        <li>Option 1 Wea</li>
                        <li>Option 1 Tra</li>
                    </ul>            
        </div>
        <div id="content_2" class="inv">Option 2
            <ul class="cd-features-list">
                <li>Option 2 Dis</li>
                <li>Option 2 Wea</li>
                <li>Option 2 Tra</li>
            </ul>           
        </div>
        <div id="content_3" class="inv">Option 3
            <ul class="cd-features-list">
                <li>Option 3 Dis</li>
                <li>Option 3 Wea</li>
                <li>Option 3 Tra</li>
            </ul>      
        </div>
        <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    'use strict';
                    // using querySelectorAll to get all matching elements
                    var allVisible = document.querySelectorAll('.vis'),
                        target = document.getElementById(this.value),
                        firstColumn = document.getElementById('First Column');
                    // iterate through all visible elements instead of just one
                    allVisible.forEach(function(element) {
                        element.className = 'inv';
                    });
                    if (target !== null) {
                        target.className = 'vis';
                    }
                    // show or hide first column depending on whether any option is selected
                    if (firstColumn !== null) {
                        firstColumn.className = this.value ? 'vis' : 'inv';
                    }
            });
        </script>
        
    </body>
</html>
...