jquery onclick by class

Question

我想在所有具有类"add-other"的输入按钮上创建一个单击事件。单击按钮时，我希望它们显示下一个带有"隐藏DV"类的div。我的事件仅适用于第一个元素。我也尝试过使用 on(( 方法，但也没有运气。

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

<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>

Answer 1

我已经修改了你的代码，现在看看它现在工作的片段..！

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

<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>

正如我所看到的，您在问题的描述中写道，我的事件仅适用于第一个元素。

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

所以添加了这个jQuery代码。

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

Answer 2

 $(document).ready(function () {
            $(".add-another").bind("click", function () {
                var element = $(this).parent().next('div.hiddenDV');
                for (i = 0; i < 5; i++) {
                    if (element.is(':hidden')) {
                        break;
                    }
                    else {
                        element = element.next('div.hiddenDV');
                    }
                }
                element.show();
            });
            $(".remove-another").bind("click", function () {
                var element = $(this).parent().next('div.hiddenDV');
                for (i = 0; i < 5; i++) {
                    if (element.is(':hidden')) {
                        element = element.next('div.hiddenDV')
                    }
                    else {
                        break;
                    }
                }
                element.hide();
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <div class="row">
            <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 id="dv1" 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  id="dv2" 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>