0

追加の入力フィールドをdivに追加および削除するように設計されたjavascript関数があります。

特定のケースでは、関数が呼び出されたときにフィールドを追加する div を指定できます。

ただし、そのdivにフィールドを追加する関数を呼び出すことができる 1 つのページ上の複数の対応する div に関連付けられた複数のボタンが必要です。

関数：

$(function() {
        var scntDiv = $('#DIV');
        var i = $('#DIV p').size() + 1;

        $('.addField').on('click', function() {
                $('<p><input type="text" id="field_' + i +'" size="20" name="field_' + i +'" value="" /> <a href="#" id="remField">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('.remField').on('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

ご覧のとおり、フィールドの追加ボタンは、「addField」クラスのボタンがクリックされるのをリッスンします。

クリックして #DIV のパラメーターを渡し、そのボタンの親 div の # と同じにしたいのですが、可能ですか?

編集: リクエストごとに、ここに私のマークアップ (の例) と関数 (注 ??? プレースホルダー) JsFiddle があります

4

3 に答える 3

1

このjsfiddleはトリックを行いますか?

HTML:

<div id="div">
    <div>
        <button type="button">
            <span>Add Field</span>
        </button>
    </div>
    <div>
        <button type="button">
            <span>Add Field</span>
        </button>
    </div>
    <div>
        <button type="button">
            <span>Add Field</span>
        </button>
    </div>
</div>

JavaScript:

(function ($, undefined) {
    'use strict';
    var i;
    i = 0;
    function fieldMaker () {
        i += 1;
        return $('<p><input type="text" id="field_' + i +'" size="20" name="field_' + i +'" value="" /> <a href="#">Remove</a></p>');
    }
    $(function () {
        $('#div').on({
            click : function () {
                $(this).closest('div').append(fieldMaker());
            }
        }, 'button');
        $('#div').on({
            click : function () {
                $(this).closest('p').remove();
            }
        }, 'a');
    });
}(jQuery));
于 2013-11-14T16:17:18.437 に答える
0

たとえば、HTML5data-*属性を使用して、情報 (入力を追加する場所) をボタンに保存できます。

<p><button data-add-field-to=".fieldset-1">add field to .fieldset-1</button></p>
<fieldset class="fieldset-1"></fieldset>

JS:

jQuery( function() {
    var i = 1; // your counter logic here
    jQuery( '[data-add-field-to]').each( function() {
        var $button = $( this );
        $button.on( 'click', function( event ) {
            var newFieldId = 'field_' + i,
                target = jQuery( $button.attr( 'data-add-field-to' ) );
            jQuery( '<input type="text" id="' + newFieldId +'" size="20" name="' + newFieldId +'" value="" />').appendTo( target );
            i++;
            return false;
        } );
    } );
} );
于 2013-11-14T16:09:04.080 に答える
0

ボタン（ボタンIDとしましょう）と追加する要素の間にマッピングがあると仮定します：

var mapping = {
  '#button1' : $('#receiver1'),
  '#button2' : $('#receiver2'),
  '#button3' : $('#receiver3')
}

1 つの解決策は、クリック イベントがトリガーされたボタンを確認することです。

$('.addField').on('click', function() {
  $('<mycontent>').appendTo(mapping(this.id));
  i++;
  return false;
});

より洗練された解決策は、ボタンごとに関数を作成することです。

Object.keys(mapping).forEach(function(key){
  $(key).on('click', function() {
      $('<mycontent>').appendTo(this);
      i++;
      return false;
  }.bind(mapping[key])); // force this to be the receiver
});
于 2013-11-14T16:20:25.197 に答える