Class 不在按钮外切换

Question

我有一个按钮，当我点击它时我想显示另一个 div。所以基本上当用户点击 DETAILS 按钮时。它应该， class 'show' 应该添加到订单主体并且它应该显示 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");
  });
});

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

谢谢

Answer 1

该按钮有一个

id="waiting-button"

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

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

Answer 2

您应该对元素使用不同的 selector。

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

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

Class 不在按钮外切换

Class doesnt toggle outside of the button

javascript

html

css

toggle

togglebutton