跟踪单击功能javascript的开关状态

Question

我知道必须有一种更有效的方法来做到这一点，我过去这样做是因为我没有太多要跟踪的按钮，但我现在有大约 40 个按钮，每次更新都会更新一个 mysql带有是或否的表，并且有 40 个单独的变量和等效的 if 语句似乎是错误的代码。

需要注意的是，您可以看到该函数有一个 1，例如onclick='btnChange(1, this.value);。有 7 个不同的按钮，然后这 7 个按钮重复 onclick='btnChange(2, this.value);。所以我想到的一种解决方案是为每个按钮设置 7 个 if 语句，并为每个 if 语句设置变量名，然后我只需要声明很多变量。所以我也不确定这是否是最好的方法。这有意义吗？

HTML
<button type="button" name='foo' value="bar1" onclick='btnChange(1, this.value); return false' class='form-control'>Button1</button>

<button type="button" name='hoo' value="bar2" onclick='btnChange(1, this.value); return false' class='form-control'>Button1</button>

JS

var button1YN = 0;
var button2YN = 0;
and so on...

var YNState;

function btnChange(tableid, btnID) {  

  if (btnID == "bar1") {

    if (button1YN === 0) {
      YNState = "yes";
      button1YN = 1;
    } else {
      YNState = "no";
      buttonY1N = 0;
    }
  }
  if (btnID == "bar2") {
    
        if (button2YN === 0) {
          YNState = "yes";
          button2YN = 1;
        } else {
          YNState = "no";
          buttonY2N = 0;
        }
      }

//ajax code to update the mysql table

}

Answer 1

不要为每个项目创建一个单独的变量，而是创建一个变量来表示您尝试跟踪的状态。这可以是一个对象或一个数组，具体取决于您的特定需求和/或偏好。

所以你可能有一个看起来像这样的状态变量，例如：

// object mapping table names to on/off state
const state = {
  tbl1: true,
  tbl2: false,
  tbl3: true
}

或者一个数组：

const state = [true, false, true];

如果您需要比真或假（开/关）更复杂的东西，您可以使用对象数组：

const state = [
  {
    table: 't1',
    on: true,
    lastModified: '2021-03-23',
    someOtherThing: 'foo'
  },
  {
    table: 't2',
    on: false,
    lastModified: '2021-03-23',
    someOtherThing: 'bananas'
  },
]

那么你只需要一个函数来在某些事情发生变化时更新状态。对于最简单的情况，真/假数组，它可以采用项目的索引和新值：

function updateItem(index, newValue) {
  state[index] = newValue;
}

或者只是在给定索引处切换现有的真/假值：

const toggleItem = index => state[index] = !state[index];

然后从您的按钮单击处理程序中调用它。

这是概念的快速证明：

// initial state. 7 buttons, all off (no value)
const buttons = Array.from({length: 7});

// function to flip the state at the given index
const toggleButton = index => {
  buttons[index] = !buttons[index]; // negate existing value. true becomes false, vice-versa
  update(); // redraw the dom
}

// redraws the html.
const update = () => {
  const container = document.querySelector('.demo');
  
  // just spitting out a button for each item in the array.
  // the key thing here is the click handler, which you might
  // want to register differently, but this works for
  // demonstration purposes.
  container.innerHTML = buttons.map((value, index) => `
    <button onclick="toggleButton(${index})">
              ${value ? "✅" : "?"} Button ${index}
    </button>
  `).join('');
}

// do the initial draw
update();

/* purely cosmetic. irrelevant to functionality */
.demo {
  display: flex;
  flex-direction: column;
  width: 100px;
}

button {
  border: none;
  padding: 0.5em;
  border-radius: 4px;
  margin: 0.5em;
}

<div class="demo" />