0

我有一个 javascript 函数，旨在向 div 添加和删除其他输入字段。

在特定情况下，我可以指定在调用函数时希望将字段添加到的 div。

但是，我希望在一个页面上有多个与多个相应 div 相关联的按钮，这些按钮可以调用该函数来向该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

我假设您在按钮（比如说按钮 id）和要添加到的元素之间有一个映射：

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

一种解决方案是检查触发点击事件的按钮：

$('.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 回答
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 回答