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>