Question

目前，我有一个功能，通过点击一个按钮添加一组字段，然后在添加与会者时为表单删除所有字段。

我在添加白色块中的3行时遇到困难，在调用点击的同时增加了与会者的数量，并添加了一组字段来填写。

我尝试在

之后创建一个回调

 next.slideDown('slow'); to next.slideDown('slow', function(){ ... });

但没有成功。

如何将这些事件与一次点击结合起来？

http://jsfiddle.net/h76KR/1/

$(document).ready(function () {
    $('#div2, #div3, #div4').hide();
    $('#add').click(function () {
        var curr = $(".question:visible");
        var next = curr.next(".question");
        next.slideDown('slow');

var theTotal = 0;

theTotal = Number（theTotal）+ Number（$（this）.val（））;

$（'。noOfAttendees'）。text（贵公司的与会者总数：“+ theTotal”）;

    });
    $('#remove').click(function () {
        var prev = $(".question:visible");
        var remove = prev.next(".question");
        remove.slideUp();
    });
});

Answer 1

你要求的确实是这样的： http://jsfiddle.net/h76KR/3/

带

var numEmployees = 1;

您只需根据需要增加和减少，然后使用

function updateEmployees(){
     $(".noOfAttendees").html("There are "+numEmployees+" Attendees");   
}

更新框。

顺便说一句，保留一个空的，隐藏的div与您克隆的员工信息可能会更好。然后，您可以拥有无限的此类克隆，而不仅仅是四个。举个例子，尝试这样做：

var employeeDiv = $("#div1").clone();
$("#div1").append(employeeDiv);

从那里开始工作。

Answer 2

好的，所以我发现我不需要将它组合成一个函数，我创建了下面的工作，并在单击删除按钮时将其重置为1。如果有人知道更有效的方法，请告诉我，改进逻辑和方法总是好的。

http://jsfiddle.net/nYHNk/1/

$(document).ready(function (){
$('#div2, #div3, #div4').hide();
$('#add').click(function(){
     //code
    var curr = $(".question:visible");
    var next = curr.next(".question");
    next.show();

});

$('#remove').click(function(){
    var prev = $(".question:visible");
    var remove = prev.next(".question");
    remove.hide();
});    
});

var oneAtt = 1;
var theTotal = 1;
$('#add').click(function(){
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: "+theTotal);        
});

$('.total').text("Total: "+theTotal);        

$('#remove').click(function (){
    theTotal = oneAtt;
   $('.total').text("Total: "+oneAtt); 
});

在一个元素上组合2个事件，单击Jquery

2 个答案: