jQuery - изменение состояния переключателя - PullRequest
Новая
       30

jQuery - изменение состояния переключателя

1 голос
/ 30 ноября 2011

Я копался и в .attr(), и в .prop(), но у меня возникли некоторые проблемы с включением опции выбора радио.

Основная предпосылка - у меня есть две радио кнопки, однавыбран по умолчанию.Когда выбран другой переключатель, на нем должно отображаться множество элементов div с классом, который он вызывает с помощью .show().У меня это работало частично, но когда вы выбираете ту же радиокнопку, которая уже была выбрана, она снова запускает действие .show() - поэтому я попытался добавить проверку, чтобы увидеть, определено ли «проверено»,это не мешает.Мой мозг на грани разрыва, поэтому любая помощь будет принята с благодарностью.Кроме того - я уверен, что есть более эффективный способ написать это, поэтому используйте jQuery 1.7.1, если есть ... пожалуйста:) 

jQuery(document).ready(function() {

    if (jQuery('#section-of_homepage_display input[value="slideshow"]:checked').val() === undefined) {
        jQuery('#section-of_homepage_display input[value="slideshow"]').click(function() {
            jQuery('.homepage_display').hide(400);
            jQuery('.homepage_display_slides').show(400);
        });
    }

    if (jQuery('#section-of_homepage_display input[value="slideshow"]:checked').val() !== undefined) {
        jQuery('.homepage_display_slides').show();
    }

    if (jQuery('#section-of_homepage_display input[value="static"]:checked').val() === undefined) {
        jQuery('#section-of_homepage_display input[value="static"]').click(function() {
            jQuery('.homepage_display').hide(400);
            jQuery('.homepage_display_static').show(400);
        });
    }

    if (jQuery('#section-of_homepage_display input[value="static"]:checked').val() !== undefined) {
        jQuery('.homepage_display_static').show();
    }

});

1 Ответ

1 голос
/ 30 ноября 2011

Вот рабочая демонстрация по jsFiddle: http://jsfiddle.net/jessegavin/8ByKA/2/

jQuery(function() {

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

    // Hide all elements initially
    // To prevent showing the non-selected items at first
    jQuery('.homepage_display').hide();

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