WordPress / Gravity Forms - Показать / скрыть div на основе значения числового поля

Я хочу условно отобразить div на основе числового поля в гравитационной форме. Числовое поле изменяется в зависимости от количества элементов, отмеченных в поле флажка. Когда вы устанавливаете какой-либо один флажок, числовое поле возвращает 1, а если вы выбираете любые два, оно возвращает 2 и т. Д. (См. это видео для демонстрации)

В ходе тестирования я обнаружил, что могу без проблем получить значение числового поля, но по какой-то причине мой оператор IF работает некорректно, и я не могу сузить круг вопросов ... Что должно произойти в этом примере заключается в том, что содержимое должно исчезнуть только тогда, когда числовое поле вернет 2.

Вот HTML-код, который форма гравитации создает для числового поля:

<div class="ginput_container ginput_container_number">
     <input name="input_5" id="input_13_5" type="text" value="" class="medium" tabindex="5" readonly="readonly" aria-invalid="false">
</div>

Вот HTML-код условного отображения содержимого, которое я разместил в другом месте на странице:

<div class="conditional-div">
    Content to hide if total field value is equal to 2
</div>

Вот jQuery, с которым я работаю:

jQuery(function ($) {
    var total = $(':input[name=input_5]');
    var total_value = total.val();
    if (total_value === "2")
        jQuery(".conditional-div").hide();
    else
        jQuery(".conditional-div").show();
});

Любая помощь с этим будет принята с благодарностью! Я отлично разбираюсь в CSS, HTML и PHP, но jQuery не моя сильная сторона. ????


wordpress html jquery gravity-forms-plugin gravityforms
person Mitch McQuinn    schedule 10.11.2020    source источник
comment
console.log (общее_значение)   -  person FSDford    schedule 10.11.2020
comment
@FSDford Я просмотрел это и обнаружил, что это что-то связано с отладкой, но я не совсем уверен, как я должен его использовать в этом случае ... Я проверил параметры своего инструмента разработчика и не нашел никаких ошибок связанные с jQuery   -  person Mitch McQuinn    schedule 10.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

HUZZAH! ???????????? После еще нескольких тестов я понял это!

Проблема была не в моем операторе IF, а в том, что ничего не регистрировало изменение поля для запуска оператора IF. Кроме того, мне, по-видимому, не нужна была эта дополнительная переменная ... В любом случае это то, что сработало:

jQuery(function ($) {
    var total = $(':input[name=input_5]');
    total.change(function() {
    if (total.val() === "2")
        jQuery(".conditional-div").hide();
    else
        jQuery(".conditional-div").show();
    });
});
person Mitch McQuinn    schedule 10.11.2020