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);
});

在这里，我们隐藏了所有的p' 开始，然后只选择那些位置是:lt选定值 ( $(this).val()) 的，然后fadeIn'ing 他们。

您现在可以在这里看到它；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 回答