2

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

我正在尝试构建一个 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");
        });
    });

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

4

2 回答 2

1

试试下面的小提琴..我已经编辑了一点html，所以它可能适用于任何数量的客人。而不是使用代码statically，使用它可能会更好dynamically，因为它可能会减少代码量。我有integrated that html part in the js.真的为你画了一个粗略的草图。希望这可以在某些方面帮助你..检查这是否是想要的伴侣.. :)

小提琴

http://jsfiddle.net/x33ek/

于 2013-12-03T05:17:43.157 回答
0

看看这个小提琴：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。

于 2013-12-03T05:12:08.873 回答