Jquery - 入力の親divを見つけてdivの子を変更します

Question

Ajax "on-the-go"フォーム。フィールドをクリックしてdbにajaxリクエストを送信します。成功した場合 - 私は "暗い"クラスのCSSを変更したいと思います。ここ はHTMLコードです：

<div class="row"> 
     <div class="col-sm-3 dark">Gender</div> 
     <div style="" class="col-sm-3"><input type="radio" name="gender" value="m"> Male</div> 
     <div class="col-sm-3"><input type="radio" name="gender" value="f"> Female</div> 
     <div class="col-sm-3"></div> 
</div> 

ロジックは次のとおりです。入力（任意の）がクリックされた（とAJAX応答が受信された）とき - 入力の親クラスROWを見つけるとCSSを変更する（のが言わせて - 「色：緑; "）の行の"暗い "クラスです。

は運

Answer 1

暗いのdivがあなたのラジオボタンの直接の祖先ではないと

$(this).closest(".dark").css('color', 'green'); 

を試してみました。あなたはそれを変更する必要があります。

$(this).closest(".row").find(".dark") 

そして、あなたはAJAXの成功関数内でこの値を使用しているので、あなたが直接このキーワードを使用することはできません呼び出すしかし、あなたはそれを使用することができます後のように、あなたが値を保存する必要があります。

クリックイベントの代わりに、変更イベントを使用することもできます。

例：

$(':radio').on('change', function(e) { 
 
    var row = $(this).closest(".row").find(".dark"); 
 
    var a = $.getJSON('https://api.github.com/repositories?since=364', function(data, textStatus, jqXHR) { 
 
     row.css('color', 'green'); 
 
    }) 
 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="row"> 
 
    <div class="col-sm-3 dark">Gender</div> 
 
    <div style="" class="col-sm-3"><input type="radio" name="gender" value="m"> Male</div> 
 
    <div class="col-sm-3"><input type="radio" name="gender" value="f"> Female</div> 
 
    <div class="col-sm-3"></div> 
 
</div>