jQuery链接css背景颜色，只工作一次

Posted 2023-05-09

【中文标题】jQuery链接css背景颜色，只工作一次

【英文标题】：jQuery chaining css background-color, only works once

【发布时间】：2017-09-14 15:54:17

【问题描述】：

我正在尝试使用 jQuery 链接段落的背景颜色更改。以下代码在第一次单击时起作用：将颜色更改为绿色，隐藏，显示，然后将颜色更改为黄色。

第二次点击时，颜色变为绿色，但没有其他反应。没有进一步的点击做任何事情。怎么了？

$( "#p1" ).click(function( event ) 
$("#p1").css("background-color","green").slideUp(2000).slideDown(2000).queue( 
function()  $("#p1").css("background-color", "yellow"); 
);
);

【参考方案1】：

这里不需要使用.queue，这样就可以了：

$("#p1").click(function(event) 
  $("#p1").css("background-color", "green").slideUp(2000).slideDown(2000, function() 
    $("#p1").css("background-color", "yellow");
  );
);

或者，使用.clearQueue

$("#p1").click(function(event) 
  $("#p1").clearQueue().css("background-color", "green").slideUp(2000).slideDown(2000).queue(
    function() 
      $("#p1").css("background-color", "yellow");
    );
);

【讨论】：

谢谢！第一个解决方案（删除队列）修复了它。我读过一篇不同的帖子，因为 css 更改会立即应用，所以需要队列（或其他延迟策略）。

由于像这样的函数调用会被它之前的操作延迟，我想知道在哪里可以看到记录在案的内容。我在任何地方都没有找到它。这个问题 (***.com/questions/5161988/…) 解决了与我的问题类似的问题，但没有提到使用函数作为解决方案。相反，它声明 setTimeout 是唯一的方法。

不过还是很好奇……为什么第一次队列可以工作，第二次却失败了？

啊！那是非常有启发性的。谢谢！