通过事件触发器/按钮单击将参数传递给 javascript 函数

Question

我有一个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 的 #，这可能吗？

编辑：每个请求是我的标记（示例）与函数（注意???占位符）小提琴

Answer 1

这个 jsfiddle 能解决问题吗？

目录：

<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));

Answer 2

您可以在按钮上存储信息（添加输入的位置），例如使用 HTML5 data-*属性：

<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;
        } );
    } );
} );

Answer 3

我假设您在按钮（假设按钮 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
});