Question

我需要能够在下拉列表中根据用户选择显示多个段落。

这些段落是这样的：

<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（）函数来做我需要做的事情......

Here's a jsFiddle

Answer 1

您可以使用:lt选择器，并将其缩短为：

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

我们在此处隐藏所有p以开始，然后仅选择位置为:lt所选值的$(this).val()（fadeIn），slice()＆＃39}。

你现在可以看到这个; http://jsfiddle.net/quyRW/3/

或者你可以使用$('#ddlSelectNumActorsToAdd').change(function () { $('#addActors p').hide().slice(0, $(this).val()).fadeIn(200); });，这可能会在显微镜下变得更快;

each()

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

另请注意，在大多数情况下，您不需要使用$('#addActors p').each(function () { $(this).hide(); });; jQuery将对每个匹配的元素执行操作。例如，而不是;

$('#addActors p').hide();

......你可以拥有;

{{1}}

Answer 2

$('#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/

jQuery - 根据下拉选择显示元素集合的数量

2 个答案: