Question

关于溢出的第一个问题，请事先原谅我的任何问题，或者我错过了之前的答案。我对jQuery有点新意，所以我编码的方式可能会有问题。我正在尝试构建一个动态表单，允许我根据用户的需要添加文本输入字段。在我尝试使用克隆按钮添加更多字段之前，它非常有效
我正在使用jquery-ui 1.11.2和jquery 1.11.2

HTML代码：

<style>.hiddenForm{display:none};</style>
<form>
    <input id="numentries" class="numspinner" />
    <div class="repeatedForm hiddenForm">
        <input type="button" class="numbutton" value="Add Fields" />
        <div class="repeatedInnerForm hiddenForm">
            <input type="text" placeholder="Gimme information" />
            <input type="text" placeholder="Gimme more information" />
        </div>
    </div>
</form>

的Javascript

$(".numspinner").spinner({min:1});
$(".numspinner").on("spin",function(event, ui){
var oldvalue = $(this).val();
var newvalue = ui.value;
var diff = newvalue - oldvalue;
if(newvalue >= 1){
    if(diff == 1){
        var newForm = $(".repeatedForm").clone(true);
        newForm.removeClass("repeatedForm");
        newForm.removeClass("hiddenForm");
        newForm.attr("id","innerForm"+newvalue);
        newForm.appendTo("form");
    }else if(diff == -1){
        $("#innerForm"+oldvalue).remove();
    }
}
});
$(".numbutton").button();
$(".numbutton").click(function(event){
    var buttonclicked = $(this);
    var newForm = $(".repeatedInnerForm").clone();
    newForm.removeClass("repeatedInnerForm");
    newForm.removeClass("hiddenForm");
    newForm.insertAfter(buttonclicked);
});

JSFiddle

我希望它只显示每个按钮按下的一组文本字段，并将文本字段与按下的按钮相关联。我认为这与按钮的初始克隆有关。对代码风格的任何意见或建设性批评都表示赞赏。

Answer 1

我并非100％确定这是您所希望的，但我更改了您的代码以根据输入值添加字段数：

var fieldCount = 0;
var formCount = 0;

$(".numspinner").spinner({
    min:1,
    spin:function(event, ui){fieldCount = ui.value;}
});

$(".numbutton").button().click(function(event){
    for(var i = 0; i < fieldCount; i++){
        formCount++;
        var newForm = $(".repeatedInnerForm")
            .clone()
            .attr('id', 'form'+formCount)
            .removeClass("repeatedInnerForm")
            .insertAfter(this);
    }
});

对于此HTML

<form>
    <input id="numentries" class="numspinner" />
    <input type="button" class="numbutton" value="Add Fields" />
    <div class="repeatedForm hiddenForm">
        <div class="repeatedInnerForm">
            <input type="text" placeholder="Gimme information" />
            <input type="text" placeholder="Gimme more information" />
        </div>
    </div>
</form>

See it in action here

Answer 2

首先，jsFiddle仅通过https排除外部资源。 cdnjs.com是获取js和css库文件的https链接的好地方。

您获取重复字段是因为您在两个位置克隆输入。首先，它会在on('spin')时克隆diff == 1，然后再在click函数中克隆它们。我编辑了代码以在on('spin')后克隆输入，然后在click上显示输入。这是一个有效的fiddle

$(".numspinner").spinner({min:1});
$(".numspinner").on("spin",function(event, ui){
    var oldvalue = $(this).val();
    var newvalue = ui.value;
    var diff = newvalue - oldvalue;
    if(newvalue >= 1){
        if(diff == 1){
            var newForm = $(".repeatedForm").clone(true);
            newForm.removeClass("repeatedForm");
            newForm.removeClass("hiddenForm");
            newForm.attr("id","innerForm"+newvalue);
            newForm.appendTo("form");
        }else if(diff == -1){
            $("#innerForm"+oldvalue).remove();
        }
    }
});
$(".numbutton").button();
$(".numbutton").click(function(event){
    var form = $(this).siblings('.hiddenForm');
    form.removeClass('repeatedInnerForm');
    form.removeClass('hiddenForm');
});

反转代码的工作方式也许是一个好主意。由于在用户单击相应的“添加更多”按钮之前不显示这些字段。最好在spin上添加按钮，然后在click上添加输入。这样，当用户没有请求时，你就不会创建元素。

Answer 3

好的，所以你的评论非常有用@craig，非常感谢你。

工作JSFiddle

HTML代码：

<form>
    <input id="numentries" class="numspinner" />
    <div id="hiddenOuterFormTemplate" class="hiddenForm">
        <p class="groupTitle"></p>
        <div class="buttonDiv">
            <input id="addButton" type="button" class="numbutton"  value="Add Fields" />
            <input id="removeButton" type="button" class="numbutton" value="Remove Fields" />
        </div>
    </div>
    <div id="hiddenInnerFormTemplate" class="hiddenForm">
        <input type="text" placeholder="Gimme information" />
        <input type="text" placeholder="Gimme more information" />
    </div>
</form>

我决定让它们成为单独的元素以避免多重复制问题，然后使用jQuery在页面上根据需要定位它们。

下面的Javascript

var totalgroups = 0;

$(".numspinner").spinner({min:1});
$(".numspinner").on("spin",function(event, ui){
    var oldvalue = $(this).val();
    var newvalue = ui.value;
    var diff = newvalue - oldvalue;
    if(newvalue >= 1){
        if(diff == 1){
            var newForm = $("#hiddenOuterFormTemplate").clone(true);
            newForm.removeClass("hiddenForm");
            totalgroups++;
            newForm.attr("id","outerForm"+newvalue);
            newForm.addClass("outerFormDiv");
            newForm.find(".groupTitle").text("Group "+newvalue + ":");
            newForm.appendTo("form");
        }else if(diff == -1){
            $("#outerForm"+oldvalue).remove();
            totalgroups--;
        }
    }
});
$(".numbutton").button();
$("#addButton").click(function(event){
    var buttonclicked = $(this);
    var newForm = $("#hiddenInnerFormTemplate").clone();
    newForm.removeClass("hiddenForm");
    newForm.addClass("dynamicTextfields")
    newForm.insertAfter(buttonclicked.parent(".buttonDiv"));
});
$("#removeButton").click(function(event){
      var buttonclicked = $(this);
      var buttonouterForm = buttonclicked.parents(".outerFormDiv");
      buttonouterForm.find(".dynamicTextfields:last").remove();         
});

再次感谢...

克隆的jQuery按钮产生比预期更多的克隆

3 个答案: