如何制作具有2種狀態的按鈕，單擊時根據狀態觸發不同的功能-有解無憂

我希望有一個按鈕作為表格上的過濾器，單擊它時會執行一個執行過濾的功能，但再次單擊它會撤消過濾器。如果第三次點擊它，它會再次過濾表格，依此類推..

HTML 只是一個簡單的按鈕選擇器：

<button id="filterButton">Click here to filter</button>

我有這個 Javascript 函式：

window.onload = function() {
            document.getElementById('filterButton').onclick = function() {      
                FilterTable(); //this function is the one that actually does the filtering, basically setting the tr[indexOfRow].style.display="none" on some specific rows.
            };

我想這樣做，如果再次單擊該按鈕，它將呼叫一個不同的函式來撤消過濾。

我嘗試在該函式的最后添加一行，將按鈕的 ID 更改為filterButtonClicked使用document.getElementById("filterButton").setAttribute("id", "filterButtonClicked");，然后使用另一個 JS 函式來處理該document.getElementById('filterButtonClicked').onclick事件，這將撤消過濾，然后在該函式的末尾，改回按鈕的 ID fiterButton。理論上，這樣會使得如果第三次點擊按鈕，它會觸發第一個 JS 函式，它會再次進行過濾并將 ID 更改為filterButtonClicked. 但在實踐中，不幸的是，這不起作用，它只會將 ID 更改為filterButtonClicked一次，隨后的點擊不會將其更改回filterButton.

也許這可以通過某種方式實作，如果按鈕的點擊次數是奇數，它將執行第一個函式，如果是偶數，它將執行第二個函式。但我不知道如何實作這一點。

有一個更好的方法嗎？

uj5u.com熱心網友回復：

您正在尋找的答案很簡單......

var state = 0; //This will act as the status of the button, 0 means needs unfiltered and 1 means need filtered. It will remain one in starting to show it is unfiltered
window.onload = function() {
  document.getElementById('filterButton').onclick = function() {
    buttonClickFunction()
  };
};

function buttonClickFunction() {
  //Run this function whenever the button is clicked
  if (state == 0) {
    FilterTable(); //this function is the one that actually does the filtering, basically setting the tr[indexOfRow].style.display="none" on some specific rows.
    state = 1; //Shows that it has been filtered
  } else {
    UnfilterTable(); //The function you want to run for unfilter
    state = 0; //Change it back to 0 to show its unfiltered
  }
}

function UnfilterTable() {
  //Whatever u wanna run to unfilter
}

function FilterTable() {
  //Whatever u wanna run to filter
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="filterButton">Click here to filter</button>
</body>

</html>

uj5u.com熱心網友回復：

宣告式地，我會onclick在每個按鈕上隱藏/顯示所需的按鈕和系結處理程式

這是一個示例 https://codesandbox.io/s/elegant-glitter-05s6pg

uj5u.com熱心網友回復：

像這樣的東西應該作業：

let filterActive = {
    state: false,
};

window.onload = function () {
    document.getElementById("filterButton").onclick = function () {
        if (filterActive.state === false) {
            FilterTable();
            filterActive.state = true;
        } else {
            // Function to undo the filtering here
            filterActive.state = false;
        }
    };
};

uj5u.com熱心網友回復：

您可以使用閉包來跟蹤狀態。根據表格是否被過濾，您可以顯示所有內容或過濾它。

  <script>
  window.onload = function () {
    document.getElementById("filterButton").onclick = function () {
      FilterToggle();
    };
  };

  function ShowAllTable() {
    // console.log("showing all the table");
  }

  function FilterTable() {
    // console.log("filtering the table");
  }

  function FilterWithClosure() {
    var filtered = false;

    return function () {
      if (filtered) {
        ShowAllTable();
        filtered = false;
      } else {
        FilterTable();
        filtered = true;
      }
    };
  }

  var FilterToggle = FilterWithClosure();
</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428655.html

標籤：javascript html

上一篇：在JavaScript的forEach回圈中通過索引從jsonAPI獲取物件值？

下一篇：通過div對齊專案2/3？