类不会在按钮之外切换答案

【问题标题】：Class doesnt toggle outside of the button类不会在按钮之外切换
【发布时间】：2021-10-09 07:37:31
【问题描述】：

我有一个按钮，当我点击它时，我想显示另一个 div。所以基本上当用户点击 DETAILS 按钮时。应该，应该将“show”类添加到 order-body 中，并且应该显示 div。

    <div id="1-order__content" class="order__content">
                          <div class="header">
                            <div class="row">
                              <div class="col-lg-3 col-md-12 col-sm-12">
                                <button id="waiting-button" type="submit" class="button-status">
                                  DETAILS
                                </button>
                              </div>
                            </div>
                          </div>
<div class="order-body show"> </div>

基本的 CSS：

.orders .order-body {
  font-size: 14px;
  display: none;
}

.orders .order-body.show {
  display: block;
}

还有 javascript：

$(document).ready(function(){
  $("waiting-button").click(function(){
      $(this).toggleClass("show");
  });
});

我不知道为什么，但它并没有像我预期的那样工作。它实际上什么也没做。那你觉得我做错了什么？

谢谢

【问题讨论】：

选择器错误。使用$("#waiting-button") 注意#
也许你可以用toggle代替toggleClass

标签： javascript html css toggle togglebutton

【解决方案1】：

按钮有一个

id="waiting-button"

所以用$选择的时候应该加“#”。

id 必须使用“#”，class 必须使用“.”

【讨论】：

【解决方案2】：

您应该为元素使用不同的选择器。

$(document).ready(function(){
  $("#waiting-button").click(function(){
      $(this).toggleClass("show");
  });
});

等待按钮前的“#”符号表示您正在使用元素 ID 进行选择。

【讨论】：