Question

我有一些代码：

$(document).on('click', '.delete',function(e){
    e.preventDefault();
    $('.selector').css({'color':'#cc0000'});
    if(confirm('Do you want to remove')){
        $.ajax({
            ...
        });
    }
    else{
        // $('.selector').css('color','');
    }
});

但css在＆＃34;确认＆＃34;后改变颜色。如何在＆＃34;确认＆＃34;？

之前显示红色

Answer 1

问题是因为confirm()是模式调用，它阻止浏览器的UI线程更新。要解决此问题，您可以将confirm()置于setTimeout()，延迟时间非常短。另请注意，除非没有其他选择，否则应避免使用css()。改为申请课程。试试这个：

$(document).on('click', '.delete',function(e){
  e.preventDefault();
  $('.selector').addClass('active');

  setTimeout(function() {
    if (confirm('Do you want to remove')) {
      $.ajax({
        // ...
      });
    }
    else {
      $('.selector').removeClass('active');
    }
  }, 25);
});

.active { color: #C00; }

Answer 2

您需要使用回调函数。可悲的是css()不支持这一点。但是你可以使用animate()，时间为0秒。

   $(this).animate({CSS-PARAMETERS},0,function(){
      if(confirm(...)){
        ...
      }
   });

Answer 3

我建议setTimeout

$(document).on('click', '.delete',function(e){
    e.preventDefault();
    $('.selector').css({'color':'#cc0000'});
    
    setTimeout(function(){
      if(confirm('Do you want to remove')){

      }
    }, 100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="delete selector">Delete?</div>

Answer 4

检查一下：

$(document).on('click', '.delete',function(e){
    e.preventDefault();
    $('.selector').css({'color':'#cc0000'});

    window.setTimeout(function()
    {
        if(confirm('Do you want to remove')){
            $.ajax({
                ...
            });
        }
        else{
            // $('.selector').css('color','');
        }
    }
    , 500);

});

Jquery改变css为时已晚？

4 个答案: