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>

Jクエリ

$('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;
    });

したがって、ラベルの名前が email の場合、この後の結果は次のようになります。

  • 最初のクリック: メール 2
  • 2 回目のクリック: メール 23
  • 3 回目のクリック: メール 234

これを行う理由は、追加するたびに、すでに番号を持っている前のものを取るためです。だから今の私の問題はそれを修正する方法です。

私が望む結果：

  • 最初のクリック: メール 2
  • 2 回目のクリック: メール 3
  • 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. e.preventDefault(); を優先して return false を削除しました。
  4. クリック時にいくつかのセレクターをキャッシュしました。もっとできるかもしれませんが、これで十分です。
于 2013-01-10T11:24:38.463 に答える