Question

如果其他帖子中包含我的答案，我会提前道歉。但是，我对它们进行了审核，但也许我的天真使我无法完全理解如何将发布的代码合并到我的页面中。无论如何，我会真诚地感谢一些帮助。

我正在尝试构建一个rsvp网页。用户选择将有多少客人参加，然后将每个客人的姓名输入到出现的文本框中（请参阅jsfiddle示例）。我的问题是每个div包含与加载的网页相同的变量，因此当用户点击“提交”时，也会提交在页面上多次列出的任何特定变量。

我想要做的是根据用户选择的访客数量添加和/或减去每个DIV。例如，当用户选择“9”来宾时，所有div都按顺序添加，但如果他们改变主意并选择“7”，则DIV 8和DIV 9将消失。

这是我想要完成的一个例子：http://jsfiddle.net/3SvC7/11/

这是我的代码的一部分，但请参阅jsfiddle的整个示例！

$(function() {

        $('#guestnum').change(function() {
            $('.g1').slideUp("slow");
            $('.g2').slideUp("slow");
            $('.g3').slideUp("slow");
            $('.g4').slideUp("slow");
            $('.g5').slideUp("slow");
            $('.g6').slideUp("slow");
            $('.g7').slideUp("slow");
            $('.g8').slideUp("slow");
            $('.g9').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
    });
$(function() {

        $('#accept').change(function() {
            $('.no').slideUp("slow");
            $('.yes').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });

        $('#decline').change(function() {
            $('.no').slideUp("slow");
            $('.yes').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
    });

有人认为他们可以提供帮助吗？提前谢谢！

Answer 1

尝试下面的小提琴..我已经编辑了一点html，因此它可能适用于任意数量的guest.Rather而不是使用代码statically，它可能更好用它dynamically，因为它可能减少代码量。我有integrated that html part in the js。真的为你做了一个粗略的草图。希望这可能在某些方面帮助你。检查这是否是想要交配... ：）

小提琴

http://jsfiddle.net/x33ek/

Answer 2

看看这个小提琴：http://jsfiddle.net/3SvC7/19/

这就是你想要的吗？

var shown = 0;
$(function () {
    $('#guestnum').change(function () {
        // Get the amount to show
        var num = parseInt($('#guestnum').val());

        // Less than we need, add rows
        if (shown < num) {
            for (var i=shown; i <= num; i++) {
                $('#g'+i.toString()).slideDown();
            }
            shown = num;
        }

        // More than we need, remove rows
        if (shown > num) {
            for (var i=shown; i > num; i--) {
                $('#g'+i.toString()).slideUp();
            }
            shown = num;
        }
    });
});

此功能执行动态隐藏。请注意，我已将每个访客行放入一个ID为g1，g2等形式的div中，因此我们可以在循环中对其进行索引，每个只有一个副本。下拉值现在也是数字本身，因此我们可以将其解析为int。

如何使用jquery动态添加/删除多个div

2 个答案: