BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] クラス別のjquery onclick

2022-02-12 15:03:24

質問

クラス "add-another"を持つすべての入力ボタンにクリックイベントを作成したいと思います。ボタンがクリックされると、クラス "hiddenDV"を持つ次の2つの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>

解決方法は？

あなたのコードを修正しましたので、スニペットをご覧ください。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します