Question

我一直在研究.attr()和.prop()，但在使用无线电选择选项时遇到了一些麻烦。

基本前提是我有两个单选按钮，默认选择一个。当选择了一个不同的单选按钮时，它应该显示一系列具有.show()调用的类的div。我让它部分工作，但是当你选择已经选择的同一个单选按钮时，它会再次运行.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();
    }

});

Answer 1

这是关于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");
});

jQuery - 单选按钮状态更改

1 个答案: