ajax成功后的jQuery addClass/removeClass

Question

我的 ajax 表单提交运行良好，但我想添加一个“成功”类以向用户指示在用户选中或取消选中某个框时请求已完成。到目前为止，我已经尝试了一些事情：

    $(".box").change(function() {
    var id=$(this).val();
    var dataString = "id=" + id + "&crudtype=myapp";
    var clickedObj = $(this).parent().parent();
    $.ajax( {
        type: "POST",
        url: "/myphppage",
        data: dataString,
        cache: false,
        success: function() {
          var oldClass = clickedObj.attr("class");
          clickedObj.fadeIn(1400, function() {
            clickedObj.removeClass(oldClass);
            clickedObj.addClass("updated");  
          });
          clickedObj.fadeOut(1400, function() {
            clickedObj.removeClass("updated");  
            clickedObj.addClass(oldClass);
          });
        } 
    });
});

那个确实应用了“更新”类，但 fadeOut 实际上删除了整行数据（parent().parent() 是我要定位的标签。）

$(".box").change(function() {
  var id=$(this).val();
  var dataString = "id=" + id + "&crudtype=myapp";
  var clickedObj = $(this).parent().parent();
  $.ajax( {
      type: "POST",
      url: "/myphppage",
      data: dataString,
      cache: false,
      success: function() {
        var oldClass = clickedObj.attr("class");
        clickedObj.removeClass(oldClass);
        clickedObj.addClass("updated", 1000);
        clickedObj.removeClass("updated", 1000);
        clickedObj.addClass("updated");
      } 
  });
});

我也试过这个，但发生的只是它（显然）删除了现有的类，添加了新的类，然后立即反向执行相同的操作，因此永远不会看到新的类。尽管我在此站点上运行 jQueryUI，但似乎忽略了 1000 延迟。

感谢任何可以提供帮助的人！

编辑：添加 HTML 代码：

<table id="datatable" class="display dataTable" role="grid">
  <tbody>
    <tr class="odd" role="row">
      <td class="formcell"><input id="actionitem" class="box" type="checkbox" value="1234" name="actionitem[]"></td>
    </tr>
    <tr class="even" role="row">
      <td class="formcell"><input id="actionitem" class="box" type="checkbox" value="5678" name="actionitem[]"></td>
    </tr>
</table>

Answer 1

我真的不知道你的淡入淡出效果应该是什么样子。在添加新类并将其淡入之前淡出旧类对我来说确实更有意义。因为当它在开始时淡出时，您看不到包含复选框的<tr>。
briansol 的回调是正确的，我在这里使用fadeTo 来防止jQuery 设置display: none：

$(".box").on("click", function () {
    clickedObj = $(this).parent().parent();

    clickedObj.fadeTo(1400, 0.01, function(){
        clickedObj.removeClass("oldClass").addClass("updated");
        clickedObj.fadeTo(1400, 1.0, function(){
            clickedObj.removeClass("updated").addClass("oldClass");
        });
    });
});

我也做了个小提琴：http://jsfiddle.net/northkildonan/rmj75wr2/

Answer 2

您需要使用回调，以便淡入淡出执行其操作，然后触发淡出事件。

改变

      var oldClass = clickedObj.attr("class");
      clickedObj.fadeIn(1400, function() {
        clickedObj.removeClass(oldClass);
        clickedObj.addClass("updated");  
      });
      clickedObj.fadeOut(1400, function() {
        clickedObj.removeClass("updated");  
        clickedObj.addClass(oldClass);
      });

到

      var oldClass = clickedObj.attr("class");

      clickedObj.removeClass(oldClass).addClass("updated");  

      clickedObj.fadeIn(1400, function() {
        clickedObj.fadeOut(1400, function() {
          clickedObj.removeClass("updated").addClass(oldClass);  //probably unnecessary as its now in a display:none state
      });