事先,如果其他帖子中有我的答案,我深表歉意。然而,我确实回顾了它们,但也许我的天真使我无法完全理解如何将发布的代码合并到我的页面中。无论如何,我真诚地感谢你的帮助。
我试图建立一个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");
});
});
有人认为他们能帮忙吗?提前谢谢!
最佳答案
试试下面的小提琴..我已经编辑了一点html
,以便它可以为任何数量的客人工作。与其使用代码statically
,不如使用它dynamically
,因为它可能会减少代码量。我已经integrated that html part in the js
。真的为你做了一个粗略的草图。希望这可以在某些方面帮助你..检查这是否是想要的伴侣。。:)
小提琴
http://jsfiddle.net/x33ek/
关于jquery - 如何使用jQuery动态添加/删除多个div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20342686/