0

ドロップダウンでのユーザーの選択に基づいて、いくつかの段落を表示できるようにする必要があります。

段落は次のように識別されます。

<p id="addActor1">
<p id="addActor2">
... etc

これは私が試したjQueryですが、機能しません（そのまま、すべての段落が表示されます）：

$('#ddlSelectNumActorsToAdd').change(function () {
    var num = $(this).val();

    for (var i = 1; i < num; i++) {
        $.each($('#addActors p'), function (i, value) {
            $(this).fadeIn(200);
        });
    }
});

上記が間違っていることはわかっていますが、必要なことを行うために $.each() 関数を適切に実装する方法が正確にわかりません...

ここに jsFiddle があります。

4

2 に答える 2

1

セレクターを使用して、次の:ltように短縮できます。

$('#ddlSelectNumActorsToAdd').change(function () {
    $('#addActors p').hide().filter(':lt(' + $(this).val() + ')').fadeIn(200);
});

ここでは、最初からすべての's を非表示にしてから、選択した値 ( )のp位置にあるものだけを選択して'ing します。:lt$(this).val()fadeIn

これが現在動作していることをここで確認できます。http://jsfiddle.net/quyRW/3/

または、を使用することもできますslice()。これは、おそらく微視的に高速であることが判明します。

$('#ddlSelectNumActorsToAdd').change(function () {
    $('#addActors p').hide().slice(0, $(this).val()).fadeIn(200);
});

http://jsfiddle.net/quyRW/8/

each()また、ほとんどの場合、 ;を使用する必要がないことにも注意してください。jQuery は、一致した各要素に対して操作を実行します。たとえば、代わりに;

$('#addActors p').each(function () {
    $(this).hide();
});

...あなたはただ持つことができます;

$('#addActors p').hide();
于 2013-02-17T14:06:03.090 に答える
0 
$('#addActors p').each(function () {
    $(this).hide();
});


$('#ddlSelectNumActorsToAdd').change(function () {
    var num = $(this).val();
    $('#addActors p').each(function (i, actor) {
        $(this).hide();
        if (i < num) {
            $(actor).fadeIn(200);
        }
    });
});

http://jsfiddle.net/quyRW/5/

于 2013-02-17T14:05:34.570 に答える