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

你需要使用一个回调，以便fadein做它的事情，然后fadeout事件触发。

变化

      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
      });

ajax成功后jQuery addClass / removeClass

2 个答案: