1

これは私のHTMLです

<div class="main_holder">
  <div class="input_holder">
    <label for="something">Some Label</label><br/>
        <input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> 
  </div>
  <a href="#" class="add">Add+</a>

  <div class="input_holder">
    <label for="something">Some Label</label><br/>
        <input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> 
  </div>
  <a href="#" class="add">Add+</a>

  <div class="input_holder">
    <label for="something">Some Label</label><br/>
        <input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> 
  </div>
  <a href="#" class="add">Add+</a>
</div>

これは私のjqueryです

var increment=1;
$('a.add').click(function() {
  increment++;

  $(this).prev('input_holder').clone().insertBefore(this).prevAll('label').text(increment);

  return false;
});

私の考えは、フィールドを複製するときに、そのフィールドが正確にどれであるか（1、2、3など）を表示したいということです。問題は、クリックしたボタンの前にあるラベルを取得できないことです。

4

3 に答える 3

0

次のように、closest()の代わりにを使用してそれを行うことができます。prevAll()

var increment=0;
$('a.add').click(function() {
  increment++;

  $(this).prev('.input_holder').clone().insertBefore(this).closest('.input_holder').find('label').text(increment);

  return false;
});

作業デモを見る

更新：これは、増分を保持するため
にそれぞれに属性を配置する新しいバージョンです。.input_holder

$('a.add').click(function() {

   prevholder = $(this).prev('.input_holder');
   increment = prevholder.attr('data-increment');
   increment++;
   prevholder.attr('data-increment', increment);
   prevholder.clone().insertBefore(this).closest('.input_holder').find('label').text(increment);

   return false;
});

作業デモを見る

于 2013-01-09T12:48:55.310 に答える
0

これを参照してください：http：//jsfiddle.net/GpT2x/

$('a.add').click(function() {
  var val = $(this).prev('.input_holder').find('label:last').text();
  val = val == "Some Label" ? 1 : (parseInt(val) + 1);
     $(this).prev('.input_holder').clone().insertBefore(this).closest('.input_holder').find('label').text(val);

  return false;
});
于 2013-01-09T13:01:00.483 に答える
0

入力ブロックを別の div にカプセル化します。これにより、より単純な JavaScript コードを作成する機会が得られます。

HTML

<div class="main_holder">
  <div class="block_holder">
    <div class="input_holder">
      <label for="something">Some Label</label>
      <br/>
      <input type="text" maxlength="255" class="cat_textbox" id="field_input"
      name="somename" />
    </div> <a href="#" class="add">Add+</a>

  </div>
  <div class="block_holder">
    <div class="input_holder">
      <label for="something">Some Label</label>
      <br/>
      <input type="text" maxlength="255" class="cat_textbox" id="field_input"
      name="somename" />
    </div> <a href="#" class="add">Add+</a>

  </div>
  <div class="block_holder">
    <div class="input_holder">
      <label for="something">Some Label</label>
      <br/>
      <input type="text" maxlength="255" class="cat_textbox" id="field_input"
      name="somename" />
    </div> <a href="#" class="add">Add+</a>

  </div>
</div>

JS

$(".main_holder").on("click", "a.add", function () {
    var count = $(this).closest(".block_holder").find("label").length;
    $(this).prev(".input_holder").clone().insertBefore($(this)).find("label").html(count);
    return false;
});

例はこちらを参照してください: http://jsfiddle.net/StJwC/

ところで、有効な HTML コードには、入力フィールドの名前と異なる ID を使用する必要があります。

于 2013-01-09T15:01:59.533 に答える