0

同じ機能コードを保持できるようにするために使用するコードがいくつかありますが、jsFiddleデモthisで見ることができる異なるフォーム要素に適用します

//latest
var maxFields = 10,
    currentFields = 1;

$('.form').on('click', '.add', function () {
      var value_src = $(this).prev();
       var container = $(this).parent().prev();
    if ($.trim(value_src.val()) != '') {
        if (currentFields < maxFields) {
            var value = value_src.val();
            var html = '<div class="line">' +
                '<input id="accepted" type="text" value="' + value + '" />' +
                '<input type="button" value="X" class="remove" />' +
                '</div>';

            $(html).appendTo(container);
            value_src.val('');
            currentFields++;
        } else {
            alert("You tried to add a field when there are already " + maxFields);
        }
    } else {
        alert("You didn't enter anything");
    }

})
    .on('click', '.remove', function () {
       $(this).parents('.line').remove();
    currentFields--;
});

私の問題は、各セクションを 10 のみに制限できるようにしたいということですが<inputs>、現時点では各セクションがカウンターを共有しているため、要件の 5 と資格の 5 が 10 の制限をトリガーします。

セクションごとに入力フィールドのカウンターを別々に保つためのきれいな方法はありますか?

4

3 に答える 3

0

このplaceholderプロパティを使用して、どのボタンが機能をトリガーしたかを特定できます。

value_src.attr('placeholder');

この文字列を使用して、連想配列内の 3 つの異なるカウンターにアクセスできます。

コード

var maxFields = 10;
var currentFields = new Object;

$('.form').on('click', '.add', function () {
      var value_src = $(this).prev();
      var container = $(this).parent().prev();
    if ($.trim(value_src.val()) != '') {
       var identity =      value_src.attr('placeholder');       

        if(currentFields[identity] == undefined)
        currentFields[identity] = 0;

        if (currentFields[identity] < maxFields)                          {
            var value = value_src.val();
            var html = '<div class="line">' +
                '<input id="accepted" type="text" value="' + value + '" />' +
                '<input type="button" value="X" class="remove" />' +
                '</div>';

            $(html).appendTo(container);
            value_src.val('');
            currentFields[identity]++;
        } else {
            alert("You tried to add a field when there are already " + maxFields);
        } 
    } else {
        alert("You didn't enter anything");
    }

})
    .on('click', '.remove', function () {
       $(this).parents('.line').remove();
    currentFields--;
});

JSFiddle: http://jsfiddle.net/9sX6X/73/

于 2013-06-19T16:20:16.700 に答える