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

我会将输入块封装到另一个 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 回答
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

您可以使用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 回答