javascript - 单击时隐藏/显示表单的一部分。如何调试？

Question

我正在学习 JS/Jquery，我试图在单击表单的一部分时显示和隐藏表单的一部分。我可以打开部分表单，但无法再次关闭它。

因为控制台中没有显示错误。我想知道人们会如何调试这种类型的错误？

形式:

<div class="col col-sm-4 more-options">Detailed options</div>

<div class="row advanced-options">
  #part of the form to open and close
</div>

JS/jQuery 代码:

$(".more-options").click(function(){
    if ('.advanced-options:hidden') {
        $('.advanced-options').show();
    } else {
        $('.advanced-options').hide();
    }
});

Answer 1

因此，代码中的内容基本上是 if 语句的每次真值。

想象一下以下场景:

if ('.advanced-options:hidden') {
  console.log(`I'm true`);
} else {
  console.log(`I won't be showed up anywhere`);
}

从技术上讲，string 被评估为 true 值，这导致了代码中的问题。

我猜解决方案如下:

$(".more-options").click(function(){
  if ($('.advanced-options').is(':hidden')) {
    $('.advanced-options').show();
  } else {
    $('.advanced-options').hide();
  }
});

在其他情况下，您可以使用 console.log()您不确定代码中有哪些值可供进一步调试的步骤。

希望这会有所帮助!