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与该类相同，因此只需使用该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);

压缩重复的jquery

4 个答案: