Jquery - 查找輸入的父div並更改div的子項

Question

Ajax「隨身攜帶」形式。你點擊一個字段發送一個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（讓我們說 - 「顏色：綠色;「）的行」黑暗「類。

試圖

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

沒有運氣

Answer 1

的暗格是不是你的單選按鈕的直接祖先。您需要將其更改爲：

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

因爲你使用的是阿賈克斯的成功，函數內部的值叫你不能直接使用這個關鍵字，但你必須保存價值等你以後可以使用它。

除了單擊事件，您可以考慮使用更改事件。

一個例子：

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