JQuery:隐藏div失败时做某事

Question

当 ticketSearch div 隐藏时，我正在尝试更改 ID 为 ticketSearchTitle 的 h2 标题的文本颜色。但是我用来做的那段代码似乎完全破坏了它(即:标题上没有指针图标，无法隐藏 div)。

分区结构:

  <h2 id="ticketSearchTitle" >SEARCH</h2>
  <div id="ticketSearch"><div>

完整代码:

$("h2#ticketSearchTitle").css({'cursor':'pointer', 'display':'inline'});

  $("h2#ticketSearchTitle").click(function(){

      $("#ticketSearch").toggle('slow');

       //change h2 text to show that is is inactive
       if ($("h2#ticketSearch").is(':hidden')){
          $("#ticketSearchTitle").css('color','#D3D3D3')
      }

  });

破坏代码的 JQuery 片段:

 //change h2 text to show that is inactive
       if $("h2#ticketSearch").is(':hidden'){
          $("#ticketSearchTitle").css('color','#D3D3D3')
      }

Answer 1

当你一个接一个地执行这两个序列时，你会导致一个问题，因为切换只是启动一个动画，而当你立即检查元素是否隐藏时该动画尚未完成:

$("#ticketSearch").toggle('slow');

//change h2 text to show that is is inactive
if ($("h2#ticketSearch").is(':hidden')){
   $("#ticketSearchTitle").css('color','#D3D3D3')
}

您有几个选择。您可以检查它是否在动画之前隐藏并根据动画前的值进行操作(知道它会被切换)。或者，您可以使用实际的动画和完成函数，以便其余代码仅在切换完成时运行。

例如，如果你想让第二部分代码在动画完成后运行，你可以这样做:

$("#ticketSearch").toggle('slow', function() {
    //change h2 text to show that is is inactive
    if ($("#ticketSearch").is(':hidden')){
       $("#ticketSearchTitle").css('color','#D3D3D3')
    }
});

仅供引用，没有理由使用 "h2#ticketSearch" 作为您的选择器。 “#ticketSearch” 会更快并生成相同的结果。