單擊另一個按鈕時如何切換按鈕？

我有 2 個示例按鈕，我需要的是當用戶單擊第二個按鈕時，第一個按鈕將更改其文本。

請參閱以下示例：

$(document).ready(function() {
  $('#anchor-sample-btn').on('click', function() {
    var text = $('#anchor-sample-btn').text();
    if (text === "On") {
      $(this).html('Off');
    } else {
      $(this).text('On');
    }
  });
});

<script src="https://bbirdtools.netlify.app/_global-externals/scripts/3.4.1.jquery.min.js"></script>

<button class="outline" id="anchor-sample-btn">On</button>

<p> When the second btn is clicked, the first btn should change to <b>On</b> if it's <b>Off</b>, and vice versa</p>

<button class="outline">When I'm clicked, toggle the first btn on/off</button>

另外，如何在單擊第一個按鈕 5 秒時禁用它以防止雙擊？

編輯：

單擊第一個 btn 時，它仍應更改文本并禁用 5 秒鐘。

第二個按鈕只是執行第一個 btn 相同功能的替代方法，因此它應該打開/關閉第一個按鈕。

非常感謝！

uj5u.com熱心網友回復：

您可以通過多種方式做到這一點，這是一種方式（不使用 jQuery）。

const $btnOne = document.querySelector('#button-one');
const $btnTwo = document.querySelector('#button-two');

let buttonOneIsOn = true;

$btnTwo.addEventListener('click', () => {
  buttonOneIsOn = !buttonOneIsOn;
  $btnOne.innerText = buttonOneIsOn ? 'On' : 'Off';
});

$btnOne.addEventListener('click', () => {
  buttonOneIsOn = !buttonOneIsOn;
  $btnOne.innerText = buttonOneIsOn ? 'On' : 'Off';
  
  $btnOne.disabled = true;
  setTimeout(() => {
    $btnOne.disabled = false;
  }, 5000);
});

<button id="button-one">On</button>

<p>When the second btn is clicked, the first btn should change to <b>On</b> if it's <b>Off</b>, and vice versa</p>

<button id="button-two">When I'm clicked, toggle the first btn on/off</button>

uj5u.com熱心網友回復：

一種方法是在點擊第二個時觸發第一個點擊

$(document).ready(function() {
  // nothing changed here
  $('#anchor-sample-btn').on('click', function() {
    var text = $('#anchor-sample-btn').text();
    if (text === "On") {
      $(this).html('Off');
    } else {
      $(this).text('On');
    }
  });
  
  // listener on second button that triggers first
  $('#button-2').click(function(){
     $('#anchor-sample-btn').click()
  })
  
  
});

<script src="https://bbirdtools.netlify.app/_global-externals/scripts/3.4.1.jquery.min.js"></script>

<button class="outline" id="anchor-sample-btn">On</button>

<p> When the second btn is clicked, the first btn should change to <b>On</b> if it's <b>Off</b>, and vice versa</p>

<button class="outline" id="button-2">When I'm clicked, toggle the first btn on/off</button>

uj5u.com熱心網友回復：

檢查哪個按鈕應該具有 onclick 事件以及您如何處理它。

$(document).ready(function() {
  $('#clickme').on('click', function() {
    var target = $('#anchor-sample-btn');
    var text = target.text();
    if (text === "On") {
      target.text('Off');
    } else {
      target.text('On');
    }
  });
});

<script src="https://bbirdtools.netlify.app/_global-externals/scripts/3.4.1.jquery.min.js"></script>

<button class="outline" id="anchor-sample-btn">On</button>

<p> When the second btn is clicked, the first btn should change to <b>On</b> if it's <b>Off</b>, and vice versa</p>

<button id="clickme" class="outline" href="#anchor-sample-btn">When I'm clicked, toggle the first btn on/off</button>

uj5u.com熱心網友回復：

嗨，用 JQuery 這樣。我只給了第二個按鈕 id 的“第二個按鈕”。

標籤：javascript html 查询

上一篇：如何在flutter中的firebase初始化之前警告用戶沒有互聯網連接

下一篇：Prop是Reactchild中的一個空物件