動力学的にナビゲート/要素を見つけて、別の要素をトリガする方法jQuery？

Question

私は入力フィールドを持っていて、それが更新されたときに別のフィールドを表示したいと思います。この場合 そのシンプルな、しかし、私はこのような100のHTMLの行を持っている場合、私はシンプルなバージョンに頼ることはできませんが、以下の例：この代わりの

<div class="row"> 
    <div class="col-md-6"> 
     <label>Test</label> 
     <input type="text" class="form-control test" name="test"> 
    </div> 
    <div class="col-md-6"> 
     <label>Test2</label> 
     <input type="text" class="form-control test2" name="test"> 
    </div> 
</div> 

Simple example: 

$('.test2').fadeIn(500); 

私はよりダイナミックなソリューションを必要とする、これは単なるですどのように私はそれがだろうと思うが、実際の例が高く評価されます。

<script> 
    $('.test2').hide(); 

    if($('.test')).change(function(){ 
     $(this).prev('div').closest('.test2').fadeIn(500); 
    }); 
</script> 

Answer 1

あなたの第二の入力にTEST2クラスを追加した後、これはこのよう

$('.test2').closest("div").hide(); 
 
$('.test').change(function() { 
 
    $(".test2", $(this).closest('.row')).closest("div").fadeIn(500); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-6"> 
 
    <label>Test</label> 
 
    <input type="text" class="form-control test" name="test"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    <label>Test2</label> 
 
    <input type="text" class="form-control test2" name="test"> 
 
    </div> 
 
</div>

Answer 2

には、次の試してみてください作品、

<div class="row"> 
    <div class="col-md-6"> 
    <label>Test</label> 
    <input type="text" class="form-control test" name="test"> 
    </div> 
<div class="col-md-6 hide"> 
    <label>Test2</label> 
    <input type="text" class="form-control" name="test_2"> 
</div> 
</div> 

そして

<script> 
    $(document).ready(function(){ 

     $('input[name=test]').change(function(){ 
      $(this).closest('div.row').find('div').eq(2).fadeIn(500); 
     }); 
    }); 
    </script> 

Answer 3

それはDOMの準備ができた後に、ユーザが入力の消失に気づくでしょうので、要素を非表示になりますどのようなjsの方法hide()を使用して、私はcollapseクラスを使用してtest2のdivコンテナを非表示にする提案、そうではなく非表示のデフォルトでは非表示になります：

<div class="col-md-6 collapse"> 
    <label>Test2</label> 
    <input type="text" class="form-control test2" name="test"> 
</div> 

注：noneに要素の表示を設定しcollapseクラス。

これが役に立ちます。

$('.test').on('input', function() { 
 
    $(this).closest('.row').find(".test2").closest("div").fadeIn(); 
 
});

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-6"> 
 
    <label>Test</label> 
 
    <input type="text" class="form-control test" name="test"> 
 
    </div> 
 
    <div class="col-md-6 collapse"> 
 
    <label>Test2</label> 
 
    <input type="text" class="form-control test2" name="test"> 
 
    </div> 
 
</div>