Как переключить вид div на основе поля выбора с множественным выбором - PullRequest
Новая
       31

Как переключить вид div на основе поля выбора с множественным выбором

0 голосов
/ 07 ноября 2018

Немного вопрос для начинающих. Я пытаюсь применить javascript для страницы публикации контента в Drupal, где, если пользователь выбирает X из выпадающего меню с множественным выбором, а затем показывает div 1,2 и 4. Если они выбирают Y и Z, показывать эти связанные поля ,

У меня уже есть базовый рабочий сценарий (даже немного уродливый и начинающий), основанный на единственном выборе. Но у меня есть несколько вариантов выбора.

Я полагаю, это делается путем помещения выбранных вариантов в массив и проверки на это. Но это немного выходит за рамки моих навыков, и я не могу найти хороший пример для своего сценария:

Черт, я даже не могу пройти мимо, просто показывая предупреждение с массивом вариантов, не говоря уже об изменении кода по мере необходимости. Я вижу предложения использовать "$ (this) .val ();" ... но я просто получаю сообщение об ошибке в консоли: "$ не функция". Я пробовал синтаксис jQuery и синтаксис javascript, предполагая, что я все сделал правильно. Я почти уверен, что мой модуль Drupal знает, что он принимает jQuery, если в этом проблема.

(как примечание: я уверен, что есть более простой / короткий способ переключать div с помощью класса или пользовательского атрибута. Но, несмотря на все различные идентификаторы и сценарии, эти методы не кажутся короче .)

Будучи новичком в Javascript, я надеюсь, что хорошо объяснил. Вот скрипт, который я сделал и хочу изменить: 

if(window.attachEvent) {
    window.attachEvent('onload', whenLoaded);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            whenLoaded(evt);
        };
            window.onload = newonload;
    } else {
        window.onload = whenLoaded;
    }
}

function whenLoaded() {

  document.getElementById('edit-field-resource-type').addEventListener('change', function () {
  alert(this.value); // test to show worked.
       // alert($(this).val()); // tried for multiple choices - didn't work: 
       // "$ is not a function" .. I tried this way too: $(this).value;
       // var choices_array = [];

    var showWebinars = this.value == "taxonomy_term-14" ? 'block' : 'none';
    var showCaseStudies = this.value == "taxonomy_term-12" ? 'block' : 'none';
    var showWhitePapers = this.value == "taxonomy_term-11" ? 'block' : 'none';
    var showVideos = this.value == "taxonomy_term-13" ? 'block' : 'none';
    var showPodcasts = this.value == "taxonomy_term-62" ? 'block' : 'none';
    var showOther = this.value == "taxonomy_term-16" ? 'block' : 'none';
    var showInfographics = this.value == "taxonomy_term-10" ? 'block' : 'none';

document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
document.getElementById('edit-field-event-duration-wrapper').style.display = showWebinars;

document.getElementById('edit-field-infographic-file-wrapper').style.display = showInfographics;

document.getElementById('edit-field-video-embed-wrapper').style.display = showVideos;
document.getElementById('edit-field-video-third-party-wrapper').style.display = 

document.getElementById('edit-field-audio-file-wrapper').style.display = showPodcasts;
document.getElementById('edit-field-audio-file-link-wrapper').style.display = showPodcasts;

document.getElementById('edit-field-resource-file-wrapper').style.display = showWhitePapers;
document.getElementById('edit-field-resource-file-wrapper').style.display = showWhitePapers;

document.getElementById('edit-field-infographic-file-wrapper').style.display = showInfographics;


   });

}

Ответы [ 3 ]

0 голосов
/ 08 ноября 2018

Я продолжу исследовать упомянутую опцию jQuery, но мне нужно исследовать другие проблемы с Drupal CMS, не позволяющие jQuery работать, даже если он добавлен в YML.

А пока вот модифицированный скрипт, который работал для меня. Уродливо и долго, но это сработало. Я приветствую любые отзывы о том, как оптимизировать или лучше сделать это в рамках моих ограничений 

document.getElementById('edit-field-resource-type').addEventListener('change', function () {

         function loopSelected() {

             var selectedArray = new Array();

             var selObj = document.getElementById('edit-field-resource-type');
             var i;
             var count = 0;
             for (i=0; i<selObj.options.length; i++) {
               if (selObj.options[i].selected) {
                 selectedArray[count] = selObj.options[i].value;
                 count++;
               }
             }


             var showWebinars = selectedArray.includes("taxonomy_term-14") ? 'block' : 'none';
             var showCaseStudies = selectedArray.includes("taxonomy_term-12") ? 'block' : 'none';
             var showWhitePapers = selectedArray.includes("taxonomy_term-11") ? 'block' : 'none';
             var showVideos = selectedArray.includes("taxonomy_term-13") ? 'block' : 'none';
             var showPodcasts = selectedArray.includes("taxonomy_term-62") ? 'block' : 'none';
             var showOther = selectedArray.includes("taxonomy_term-16") ? 'block' : 'none';
             var showInfographics = selectedArray.includes("taxonomy_term-10") ? 'block' : 'none';

             alert(showWebinars);

             document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-event-duration-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-byline-wrapper').style.display = showWebinars;

             document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-event-duration-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-byline-wrapper').style.display = showWebinars;
             document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-event-date-range-wrapper').style.display = showWebinars;

             document.getElementById('edit-field-infographic-file-wrapper').style.display = showInfographics;

             document.getElementById('edit-field-video-embed-wrapper').style.display = showVideos;
             document.getElementById('edit-field-video-third-party-wrapper').style.display = showVideos;
             document.getElementById('edit-field-video-type-wrapper').style.display = showVideos;

             document.getElementById('edit-field-audio-file-wrapper').style.display = showPodcasts;
             document.getElementById('edit-field-audio-file-link-wrapper').style.display = showPodcasts;


           }

        loopSelected();

    });

    }
0 голосов
/ 09 ноября 2018

Если вы создали тип контента обычным способом, просто используйте модуль «Условные поля».

Вам не нужно кодировать эту функцию.

0 голосов
/ 08 ноября 2018

Используя jQuery, что-то похожее на это должно работать для вас (обратите внимание, что символ # будет выбирать элементы по их id, а символ . будет выбирать элементы по их class. 

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#edit-field-resource-type').change(function(){
                var v = $(this).val();
                $('.all-options').hide(); //hide all the divs first, then only show the ones you want to show
                if(v==='something-1'){
                    $('.something-1').show();
                }
                else if(v==='something-2'){
                    $('.something-2').show();
                }
                // and so on...
            });
        });
    </script>
</head>
...