jquery - 压缩重复的jquery

Question

有人可以告诉我如何将这个重复的 jquery 压缩成一个函数吗？基本上，如果单击单选按钮 (#pgy_)，则会显示相应的 div (.pgy_)。

$('#pgy1').click(function() {
        if( $(this).is(':checked')) {
            $(".pgy1").show();
        } else {
            $(".pgy1").hide();
        }
    });
    $('#pgy2').click(function() {
        if( $(this).is(':checked')) {
            $(".pgy2").show();
        } else {
            $(".pgy2").hide();
        }
    }); 
    $('#pgy3').click(function() {
        if( $(this).is(':checked')) {
            $(".pgy3").show();
        } else {
            $(".pgy3").hide();
        }
    });

Answer 1

ID 与类相同，因此只需使用它，并使用以下命令缩短隐藏/显示toggle()：

$('#pgy1, #pgy2, #pgy3').on('click', function() {
    $('.'+this.id).toggle(this.checked);
});

Answer 2

尝试：

$('input[id^=pgy]').click(function() {
        if( $(this).is(':checked')) {
            $("div."+this.id).show();
        } else {
            $("div."+this.id).hide();
        }
    });

Answer 3

您可能想要移动到类名和相对选择器。您可能需要根据您的 HTML 结构进行调整。

   $('.btn').click(function() {
        if( $(this).is(':checked')) {
            $(this).next('.section').show();
        } else {
             $(this).next('.section').hide();
        }
    });

这样你就不需要指定单个元素，你只需要坚持一个模式。

Answer 4

function applySelector(selector){
 $('#'+selector).click(function() {
    if( $(this).is(':checked')) {
        $("."+selector).show();
    } else {
        $("."+selector).hide();
    }
 });
}

applySelector(name_1);
applySelector(name_2);