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的＃，这可能吗？

编辑：这里的每个请求是我的功能标记（示例）（注意???占位符） JsFiddle

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

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

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

3 个答案: