jquery - jQuery 故障排除技术

Question

我试图从问答切换面板中找到下面代码中的问题，其中每个h3问题后面都有一个 div 答案。此特定代码应该遍历所有问题和答案并关闭任何打开的问题。

我不是在这里问代码有什么问题，而是我不知道是否有一些技巧可以解决它。例如，当.next()this 转移到 div 时h3，最好在某处有一个表示该 div jQuery 对象的变量，即next(). 并且slideToggle(1000)很高兴看到正在查看的切换状态变量slideToggle()。

$('#qa h3').each(function() {
debugger;
this$ = $(this);
if(this$.hasClass('ui-state-active')) {
    this$.toggleClass("ui-state-active ui-state-default")
   .next()
    .toggleClass("ui-accordion-content-active")
    .slideToggle(1000);
} 

感谢您的任何建议

Answer 1

您可以使用简单地将您请求的变量打印到控制台console.log。

$('#qa h3').each(function() {
  debugger;

  $this = $(this);
  console.log($this);

  if($this.hasClass('ui-state-active')) {
    console.log('$this has class .ui-state-active');
    console.log('$this.next() = ' + $this.next());

    $this.toggleClass("ui-state-active ui-state-default").next().toggleClass("ui-accordion-content-active").slideToggle(1000);
  }
}

就书籍而言，我认为您的问题是您缺少花括号。我在上面的代码中添加了缺少的大括号。

Answer 2

if (this$.hasClass('ui-state-active')) {
    // code added for troubleshooting purposes
    var that = this$.next();
    console.log(that);
    // end
    this$.toggleClass("ui-state-active ui-state-default")
    .next()
    .toggleClass("ui-accordion-content-active")
    .slideToggle(1000);
}