0

オーバーフローに関する最初の質問です。問題が発生した場合や、以前の回答を見逃した場合は、あらかじめご容赦ください。私は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

ボタンを押すたびに 1 セットのテキスト フィールドのみを表示し、テキスト フィールドを押されたボタンに関連付けたいと思います。ボタンの最初のクローンに関係していると思います。コード スタイルに関する意見や建設的な批判を歓迎します。

4

3 に答える 3

0

わかりましたので、あなたのコメントは非常に役に立ちました@craig、@tedどうもありがとう。

ワーキング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();         
});

再度、感謝します...

于 2015-06-11T20:17:59.307 に答える
0

まず、jsFiddle は https 経由の外部リソースのみを除外します。cdnjs.comは、js および css ライブラリ ファイルへの https リンクを取得するのに最適な場所です。

2 つの場所で入力を複製しているため、フィールドが重複しています。最初にそれらon('spin')を複製しdiff == 1、次に関数で再度複製しますclick。コードを編集して、入力を一度複製してからon('spin')、入力を表示するようにしましたclick。これが実用的なフィドルです

$(".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ます。そうすれば、ユーザーが要求していないときに要素を作成することはありません。

于 2015-06-11T17:18:24.450 に答える