jQuery - проверяет текущее состояние переключателя и скрывает div

Question

ВОПРОС: Как бы я проверил значение радиокнопки загрузки и, если это определенное значение, выполнил действие, основанное на этом? Ссылка в конце моего кода в операторе if .

ДОПОЛНИТЕЛЬНОЕ ПОЯСНЕНИЕ

Так что я знаю, что название этого вопроса может звучать знакомо для других вопросов, но я немного больше вовлечен и пытаюсь найти лучший способ подойти к нему. Итак, в моей функции homepageDisplayHandleSelection() я скрываю / показываю области, основываясь на выборе радиокнопок из этой .homepage_display области. Затем я в основном использую ту же функциональность для другой группы переключателей внутри нее, которая называется mainImageLinkHandleSelection, а затем скрывает / показывает области в зависимости от выбора. Я могу просто переключаться между опциями Static и Slide, но первоначальный вид (если Slideshow выбран при загрузке страницы) заключается в том, что он все еще показывает вторичные переключатели mainImageLinkHandleSelection, и это не до Я отключаю опцию Slideshow и возвращаюсь к Static, чтобы она исправлялась.

Итак, я попытался исправить это (в нижней части примера кода), создав проверку, если текущее значение радио, которое проверяется, равно slideshow, и если да, я скрываю div с именем main_link (который также прикреплен к каждой из областей вокруг mainImageLinkHandleSelection делений). Я знаю, что в моем вопросе есть куча частей, но я подумал, что если кто-нибудь сможет помочь, где-то там будет гений;) Большое спасибо за любую помощь!

jQuery(document).ready(function() {

    // Homepage Settings - Homepage Display
    // This function handles the radio clicks.
    function homepageDisplayHandleSelection() {
        var duration = 400;
        jQuery('.homepage_display').hide(duration);
        jQuery('.main_link').hide(duration);
        if (this.value === "slideshow") {
          jQuery('.homepage_display_slides').show(duration);     
        } else if (this.value === "static") {
          jQuery('.homepage_display_static').show(duration);     
        }
    }

    // Attach a click handler to the radios
    // and trigger the selected radio
    jQuery('#section-of_homepage_display :radio')
        .click(homepageDisplayHandleSelection)
        .filter(':checked').trigger('click');

    // Homepage Settings - Main Link Options
    // This function handles the radio clicks.
    function mainImageLinkHandleSelection() {
        var duration = 400;
        jQuery('.main_link').hide(duration);
        if (this.value === "external_url") {
          jQuery('.main_link_external').show(duration);     
        } else if (this.value === "wp_page") {
          jQuery('.main_link_page').show(duration);     
        }
          else if (this.value === "wp_post") {
          jQuery('.main_link_post').show(duration);     
        }
          else if (this.value === "wp_taxonomy") {
          jQuery('.main_link_category').show(duration);     
        }
    }

    // Attach a click handler to the radios
    // and trigger the selected radio
    jQuery("#section-of_main_image_link_option :radio")
        .click(mainImageLinkHandleSelection)
        .filter(":checked").trigger("click");


  // Make sure main image link option are hidden by default if slideshow option is selected
    if (jQuery('#section-of_homepage_display :radio :checked').val() === 'slideshow') {
      jQuery('.main_link').hide();
    }

});

Answer 1

Что ж, я предполагаю, что каждая радиокнопка имеет уникальное значение, и им всем дано одно и то же имя.В этом случае вам нужен селектор :checked:

var $selected = $('input[name="RadioGroup"]:checked', '#someform');
if($selected.length == 0) {
   // None is selected
} else {
   var whichOne = $selected.val();
   // do stuff here
}

, который даст вам значение выбранной в данный момент радиокнопки.Если у вас уже есть id радиокнопки, которую вы хотите проверить, то это просто:

$('#someradiobutton').is(':checked') // returns true if checked, else false

В частности, поскольку вы специально хотите проверить значение slideshow, я полагаю, что выif заявление станет:

if (jQuery('input[name="mainImageLinkHandleSelection"][value="display"]', '#section-of_homepage_display').is(':checked')) {
  jQuery('.main_link').hide();
}

РЕДАКТИРОВАТЬ : Я вижу вашу проблему сейчас.Проблема в том, что вы скрываете все элементы .main_link, а также элементы .homepage_display.Но когда вы нажимаете радиокнопку выбора домашней страницы, вы не проходите и повторно отображаете элемент .main_link, который отражается группой радиокнопок yhlumberyardstraditional3[of_main_image_link_option].

Две вещи:

1. Использовать обработчик событий change вместо click.Это предотвратит ненужную работу всей последовательности анимации при нажатии уже выбранной радиокнопки.
2. Когда элемент отображается, вам нужно будет проверить, отмечены ли какие-либо радиокнопки, и затем вызвать changeобработчик событий для этих переключателей.

Я пошел вперед и обновил вашу скрипку с проверкой концепции.Основное изменение заключается в следующем:

var toShow = null;
if (this.value === "slideshow") {
  toShow = '.homepage_display_slides';
} else if (this.value === "static") {
  toShow = '.homepage_display_static';
}

if(toShow) {
    jQuery(toShow).show(duration);
    // If we just showed any checked radio buttons, let's re-trigger
    // them so they can update their groups and such
    jQuery('input:checked:visible', toShow).trigger('change');
}

Я также позволил себе обобщить проблему и сократил код до 39 строк.Проверьте это здесь .