1

この反復的な jquery を 1 つの関数に凝縮する方法を教えてもらえますか? 基本的に、ラジオ ボタン (#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();
        }
    });
4

4 に答える 4

6

ID はクラスと同じなので、それを使用して、非表示/表示を次のように短縮しtoggle()ます。

$('#pgy1, #pgy2, #pgy3').on('click', function() {
    $('.'+this.id).toggle(this.checked);
});
于 2013-09-11T17:30:12.473 に答える
1

試す：

$('input[id^=pgy]').click(function() {
        if( $(this).is(':checked')) {
            $("div."+this.id).show();
        } else {
            $("div."+this.id).hide();
        }
    });
于 2013-09-11T17:28:30.730 に答える
1

おそらく、クラス名と相対セレクターに移動したいと思うでしょう。HTML 構造によっては、調整が必要になる場合があります。

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

この方法では、個々の要素を指定する必要はなく、パターンに固執するだけで済みます。

于 2013-09-11T17:29:38.513 に答える
0 
function applySelector(selector){
 $('#'+selector).click(function() {
    if( $(this).is(':checked')) {
        $("."+selector).show();
    } else {
        $("."+selector).hide();
    }
 });
}

applySelector(name_1);
applySelector(name_2);
于 2013-09-11T17:28:41.837 に答える