jquery onclick by class

Question

我想在所有具有类＆＃34; add-another＆＃34;的输入按钮上创建一个click事件。单击按钮时，我希望它们显示下一个带有类＆＃34; hiddenDV＆＃34;的两个div。我的活动仅适用于第一个元素。我也尝试过使用on（）方法，但也没有运气。

＆＃13;

＆＃13;

$(".hiddenDV").hide();
$(".add-another").click(function() {
        $(this).nextAll('.hiddenDV:lt(2)').show();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel-body">
  <div class="row">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>

  <input type="button" class="btn btn-default extra-margin add-another" value="+" />

  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
    <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" class="btn btn-default" value="-" />
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
    <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" class="btn btn-default" value="-" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已经修改了你的代码现在看看它正在运行的片段..！

＆＃13;

＆＃13;

$(document).ready(function(){
$('.hiddenDV').hide();
	$(".add-another").click(function() {	$(this).parents('.row').nextAll('.hiddenDV:lt(2)').show().next('.more-buttons').show();
});
	$(".remove-another").click(function() {
		$(this).parents('.row').hide().prev('.hiddenDV').hide();
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  <div class="row">
    <div class="col-md-12">
      <input type="text" placeholder="name"/><br />
      <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    </div>
  </div>

  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
    <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" class="btn btn-default remove-another" value="-" />
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
    <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" class="btn btn-default remove-another" value="-" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

正如我所见，您已在您的问题描述中写明我的活动仅适用于第一个元素。

问题是您第二次无法找到下一个.hiddenDV ..！因为这个元素不是.add-another按钮的下一个元素..！

所以添加了这个jQuery代码..

$(this).parents('.row').nextAll('.hiddenDV:lt(2)').show().next('.more-buttons').show();

Answer 2

3

find(int start)