如何動態導航/找到元素來觸發另一個元素jQuery？

Question

我有一個輸入字段，當它更新時，我想另一個顯示。 在這種情況下它的簡單，但如果我有這樣的HTML 100行，我不能靠簡單的版本，下面的例子：

<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

將測試2級到你的第二個輸入後，這個以這種方式工作

$('.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

我建議隱藏使用collapse類test2 DIV容器，所以它會在默認情況下，而不是隱藏使用它的JS方法hide()究竟會隱藏元素後的DOM準備好，因此用戶會發現投入的消失被隱藏：

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

注：collapse類元素顯示設置爲none。

希望這會有所幫助。

$('.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>