Jquery帮助选择输入字段

Jquery help selecting input fields

本文关键字：字段 输入 选择 帮助 Jquery      更新时间：2023-09-26

我试图重写这个Jquery http://jsfiddle.net/Claudius/gDChA/4/使用这个HTML代替http://pastie.org/2370829

Jquery: 

$('button.add', '#companyinfo').live('click', function(e) {
    $(this).parent().find('button.remove').show();
    $(this).hide();
    var element = $(this).parents('.input').find('input').last().clone().prop('value','');
    var name = element.prop('name');
    var pattern = new RegExp(/'[(.*?)']/);
    var info = name.match(pattern)[1];
    var newname = name.replace(pattern, '[' + info + 'info' + ']');
    var newid = element.prop('id') + 'info';  
    element.prop('name', newname);
    element.prop('id', newid);    
    element.insertAfter($(this).parents('.input').find('input').last());
})
$('button.remove', '#companyinfo').live('click', function(e) {
    $(this).parent().find('button.add').show();
    $(this).hide();
    $(this).parents('.input').find('input').last().remove('input');
});

旧的HTML 

<fieldset id='companyinfo'><legend>Company info</legend>
    <div class='input string optional'>
        <label for='company_navn' class='string optional'>Count</label>
        <input type='text' size='50' name='company[count]' id='company_navn' maxlength="255"  class='string optional' />
        <div class='button-row'>
            <button class='add'>Add info</button>
            <button class='remove'>Remove</button>
        </div>
    </div>
    <div class="input string optional">
        <label for="company_navn" class="string optional">Navn</label>
        <input type="text" size="50" name="company[navn]" maxlength="255" id="company_navn" class="string optional">
        <div class='button-row'>
            <button class='add'>Add info</button>
            <button class='remove'>Remove</button>
        </div>
    </div>    
</fieldset>
新HTML: 

<div class="input string optional"><label for="virksomhed_navn" class="string optional"> Navn</label><input type="text" size="50" name="virksomhed[navn]" maxlength="255" id="virksomhed_navn" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>
    <div class="input string optional"><label for="virksomhed_name" class="string optional">Name</label><input type="text" size="50" name="virksomhed[name]" maxlength="255" id="virksomhed_name" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>

    <div class="input string optional"><label for="virksomhed_pis" class="string optional">Pis</label><input type="text" size="50" name="virksomhed[v]" maxlength="255" id="virksomhed_pis" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>

我如何在新的HTML中选择输入字段并创建相同的功能?

有两个地方需要修改。

  1. 处理程序挂接到的按钮。
  2. 获取最后一个输入字段的方式。

你可以做一些小的改进:

    由于按钮是静态的，你可以使用click()来添加事件处理程序，而不是live()
  1. 在三个地方，你需要找到相对于当前按钮的最后一个输入字段;使其成为一个函数将使其更容易理解和修改。
    2. 大多数jQuery集合函数，包括prop()，都可以使用一个对象来设置多个值。这通常比多次调用同一个函数要好。

所以，最后的结果是:

function findLastInput ( element ) {
  return $( element ).parent().prev().find('input').last(); 
}
$('button.add').click ( function(e) {
    $(this).parent().find('button.remove').show();
    $(this).hide();
    var element = findLastInput(this).clone();
    var name = element.prop('name');
    var pattern = new RegExp(/'[(.*?)']/);
    var info = name.match(pattern)[1];
    element.prop({
      'value': '',
      'name' : name.replace(pattern, '[' + info + 'info' + ']'),
      'id'   : element.prop('id') + 'info'
    });    
    element.insertAfter(findLastInput(this));
})
$('button.remove').click ( function(e) {
    $(this).parent().find('button.add').show();
    $(this).hide();
    findLastInput(this).remove('input');
});
相关文章：