Question

我正在使用jQuery和Ruby on Rails。我有一个由3列组成的表，包括一个表单元素，通过选择框使用AJAX提交结果。我想通过在样式表中添加/删除一个类来更改复选标记的颜色，表示用户是否已将表单完成到相应的行。当一行完成时，我可以更改所有复选标记，但我无法确定完成行的复选标记。

这看起来很简单（而且我认为是这样）但是由于某些原因它似乎并没有起作用。

show.html.erb

<div id="container">
 <tr>

  <td>      
    <span class="glyphicon glyphicon-ok incomplete"></span>
    <%= work_set.reps %> x                                  
    <%= work_set.weight %>kg                            
  </td>

  <td>                                      
    <%= form_for object, :format => 'json' do |f| %>                                     
    <%= f.select :column2, options_for_select((0..object.column1).map {|i| [i,i]}, object.column2) %>                                                       
    <% end %>   
  </td>

 </tr>
</div>

的application.js

$('#container').on('change', 'select', function(e) {
  var currentTarget = $(e.currentTarget);
  var form = currentTarget.parents('form');

  $.ajax({
    url: form.attr('action'),
    type: 'POST', 
    data: form.serialize(),
    dataType: 'json',
    success: function(xhr, textStatus){

          // NOT WORKING
      $(this).closest('tr').find('span').removeClass('incomplete').addClass('complete');

    }
  });
});

style.css.scss

.glyphicon-ok.incomplete {
  color: #777;
  opacity: 0.5;
  float: left;
}

.glyphicon-ok.complete {
  color: green;
  float: left;
}

Answer 1

尝试将其更改为：

currentTarget.closest('tr').find('span').removeClass('incomplete').addClass('complete');

说明：

问题的原因是回调函数中this的值是指该ajax调用的jqXHR对象。但是，$.ajax方法允许您使用this选项设置context的值。

  $.ajax({
    url: form.attr('action'),
    type: 'POST', 
    data: form.serialize(),
    dataType: 'json',

    context: e.currentTarget,      // < === HERE ===

    success: function(xhr, textStatus){    
      // Now, `this` refers to `e.currentTarget`
      $(this).closest('tr').find('span').removeClass('incomplete').addClass('complete');
    }
  });

或者，您可以引用引用所需DOM元素的局部变量。这是第一个选项，位于答案的顶部。

PS。我发现this SO answer this非常有用。

jQuery：无法使用nearest（）查找元素;

1 个答案:

说明：