1

HTML：

<div class="main_holder">
      <div class="input_holder">
        <label for="something">Email</label><br/>
            <input type="text" id="field_input" name="email" /> 
      </div>
      <a href="#" class="add">Add+</a>

      <div class="input_holder">
        <label for="something">Address</label><br/>
            <input type="text" id="field_input" name="address" /> 
      </div>
      <a href="#" class="add">Add+</a>

      <div class="input_holder">
        <label for="something">Name</label><br/>
            <input type="text"  id="field_input" name="name" /> 
      </div>
      <a href="#" class="add">Add+</a>
    </div>

jQuery

$('a.add').click( function() { 
        var n=$(this).prevAll('.input_holder').size()+1;
        $(this).prev('.input_holder').clone().insertBefore(this);
        $(this).prev('.input_holder').find('label').append(n);
        return false;
    });

因此，如果我的标签名称是电子邮件，那么之后的结果是：

  • 第一次点击：电子邮件 2
  • 第二次点击：电子邮件 23
  • 第三次点击：电子邮件 234

这样做的原因是因为在每次附加之后，它都会采用已经有数字的前一个。所以我现在的问题是如何解决这个问题，所以它每次只放第一次

我想要的结果：

  • 第一次点击：电子邮件 2
  • 第二次点击：电子邮件 3
  • 第三次点击：电子邮件 4
4

2 回答 2

0

尝试使用正则表达式.replace：

$(this).prev('.input_holder').find('label').append('0').text( function(i,str) {
    return str.replace(/\d+$/, n);
});

http://api.jquery.com/text/

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace

于 2013-01-09T17:06:47.680 回答
0

HTML 

<div class="main_holder">
  <div class="input_holder">
    <label for="something">Email</label><br/>
    <input type="text" id="field_input" name="email" /> 
  </div>
  <a href="#" class="add">Add+</a>

  <div class="input_holder">
    <label for="something">Address</label><br/>
    <input type="text" id="field_input" name="address" /> 
  </div>
  <a href="#" class="add">Add+</a>

  <div class="input_holder">
    <label for="something">Name</label><br/>
    <input type="text"  id="field_input" name="name" /> 
  </div>
  <a href="#" class="add">Add+</a>
</div>

JS

$('a.add').click( function(e) { 
  var $this = $(this),
      $prev = $this.prevUntil('.add');

  $prev.last().clone().insertBefore(this);
  $this.prev('.input_holder').find('label').append($prev.length + 1);

  e.preventDefault();
});

JSFiddle

http://jsfiddle.net/4B3xU/

我修改了 JS，但没有修改 html。

这是我所做的：

  1. 你总是克隆第一个输入，所以永远不要得到数字
  2. 修复了即使您想添加地址输入也会克隆电子邮件输入的错误
  3. 删除了 return false 以支持 e.preventDefault();
  4. 单击时缓存了一些选择器。可以做更多，但这应该足够了。
于 2013-01-10T11:24:38.463 回答