如何使用該方法：$().button('toggle') 用於此引導程序“單選按鈕列表”？

Question

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="radio" name="options" id="option1" autocomplete="off" 
        checked> Active
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off"> 
        Radio
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option3" autocomplete="off"> 
        Radio
    </label>
</div>

$().button('toggle') ：切換推送狀態。 使按鈕具有已激活的外觀。

RadioButtonList 圖像的屏幕截圖。 從最左邊的按鈕可以看到，當它被點擊時，它看起來像是被點擊了。

我目前正在制作的登錄頁面的屏幕截圖。 當我點擊其中一個“單選”按鈕時，它們的外觀沒有改變，所以我必須使用 $().button('toggle') 方法，但我不知道在哪里或如何使用它。

Answer 1

您只需要向jQuery函數添加正確的選擇器即可。 嘗試使用此代替：

$(".btn-group").button("toggle");

現在您的代碼應該可以工作了。

希望這會有所幫助！

Answer 2

我遇到這個問題是因為我被一個類似的用例難住了。 這是我第一次使用 jquery，所以起初我對語法有點困惑。 （tl;博士 JS/jquery 之間的差異見 4。）

我想擴展第一個答案，因為我會感謝其他人做同樣的事情。 我在 Bootstrap 4.5.3 上解決了這個問題幾個小時，完全不明白為什么我的單選按鈕不會顯示切換效果，然后我意識到button()方法有一個庫要求，我做到了在文檔中看不到。

1. 所需的庫：如果您希望此功能以“引導方式”工作，則在調用 jquery 腳本之前的buttons.js庫位於node_modules/bootstrap/js/dist/

加載 + 初始化示例：

    <script src="node_modules/bootstrap/js/dist/buttons.js">
    $('.btn-group').button('toggle');
    </script>

您可以分解 jquery 並加載腳本，如果這有助於您保持簡潔（每個單獨的<script />標簽）：

    <script src="node_modules/bootstrap/js/dist/buttons.js"> </script>
    <script>$('.btn-group').button('toggle');</script>

2. 為您的用例選擇合適的元素： TWBS 在另一個引導工具提示示例中解釋了一種更具體的定位按鈕的方法 - 這是通過數據屬性定位元素的子元素： https : //getbootstrap.com/docs /4.5/components/tooltips/#example-enable-tooltips-everywhere

    $('[data-toggle="button"]').button('toggle');

關於通過數據屬性選擇元素的更多信息： 使用 jQuery 通過數據屬性選擇元素

3. 用例的正確目標繼續：您可以通過多種方式將其附加到元素，這是一個使用每個按鈕的 ID 的示例， #哈希符號表示 ID 選擇器（ .句點符號表示一個類，就像css一樣） - 您只需將它們放在一個數組中並將其傳遞給button()方法：

    $(['#option1', '#option2', '#option3']).button('toggle');

這可以是類（以句點開頭，例如['.button-one', '.button-two']等。

4. 大圖：如果你看到這里的模式，jquery 使用這些$(DOM ELEMENT).method(SCOPE)語句，它們是 JS 使用的語法的更簡潔的形式，它會更冗長，比如：

    let lis = document.getElementsByTagName('li');
    let firstLi = lis[0];
    firstLi.addEventListener('click', () => console.log('clicked first li'))

所以它基本上是一樣的，只是不那么冗長。 因為 jquery 是專門為處理 DOM 開發的，所以這是有道理的。

如果您想在不加載 bootstrap buttons.js庫的情況下實現相同的外觀，您可以將.active類附加/刪除到.active按鈕的標簽上，該類在附加時會使單選按鈕的外觀靜音，例如：

    $('.btn').on('click', function () {
    $(this).siblings('label').removeClass('active');
                $(this).addClass('active');
            });

聲明說明：當一個帶有.btn類的元素被點擊時，它將從任何帶有標簽類型label同級元素中刪除所有.active類，並將.active類添加到您點擊的.active元素上。

但是，如果您檢查button.js庫，您會發現toggle()在幕后做了更多的事情，而不僅僅是應用/刪除.active （並且對於不同的可能用例有很多很多條件。. .)：

     _proto.toggle = function toggle() {
          var triggerChangeEvent = true;
          var addAriaPressed = true;
          var rootElement = $__default['default'](this._element).closest(SELECTOR_DATA_TOGGLES)[0];
    
          if (rootElement) {
            var input = this._element.querySelector(SELECTOR_INPUT);
    
            if (input) {
              if (input.type === 'radio') {
                if (input.checked && this._element.classList.contains(CLASS_NAME_ACTIVE)) {
                  triggerChangeEvent = false;
                } else {
                  var activeElement = rootElement.querySelector(SELECTOR_ACTIVE);
    
                  if (activeElement) {
                    $__default['default'](activeElement).removeClass(CLASS_NAME_ACTIVE);
                  }
                }
              }
    
              if (triggerChangeEvent) {
                // if it's not a radio button or checkbox don't add a pointless/invalid checked property to the input
                if (input.type === 'checkbox' || input.type === 'radio') {
                  input.checked = !this._element.classList.contains(CLASS_NAME_ACTIVE);
                }
    
                if (!this.shouldAvoidTriggerChange) {
                  $__default['default'](input).trigger('change');
                }
              }
    
              input.focus();
              addAriaPressed = false;
            }
          }
    
          if (!(this._element.hasAttribute('disabled') || this._element.classList.contains('disabled'))) {
            if (addAriaPressed) {
              this._element.setAttribute('aria-pressed', !this._element.classList.contains(CLASS_NAME_ACTIVE));
            }
    
            if (triggerChangeEvent) {
              $__default['default'](this._element).toggleClass(CLASS_NAME_ACTIVE);
            }
          }
        };

所以，可能最好只加載button.js ...

旁注：jquery 中的箭頭函數通常以window對象為目標，因此最好避免，除非您知道自己在做什么。