Question

我正在尝试有3个按钮，当用户单击其中的一个按钮时，它将显示相应的表并隐藏其他两个按钮。

我尝试使用通过id获取元素，然后根据表的当前状态将显示设置为none或block。

<div onclick="myFunction()" id="u362" class="ax_default">
</div>
<div onclick="myFunction2()" id="u317" class="ax_default">
</div>

<script>
  function myFunction() {
    var a = document.getElementById("tbl");
    var b = document.getElementById("tbl2");
    if (a.style.display === "none") {
      a.style.display = "block";
      b.style.display = "block";
    } else {
      a.style.display = "none";
      b.style.display = "none";
    }
  }

  function myFunction2() {
    var a = document.getElementById("tbl");
    var b = document.getElementById("tbl2");
    if (b.style.display === "none") {
      a.style.display = "block";
      b.style.display = "block";
    } else {
      a.style.display = "none";
      b.style.display = "none";
    }
  }
</script>

实际结果确实很奇怪，与我要尝试的操作没有任何相似之处。

Answer 1

这是您清理的代码的一部分。正如上面@ kojow7所指出的，它们基本上只基于一张表或另一张表来执行相同的操作。注意事项： 1）在函数中使用更具描述性的变量名 2）创建一个隐藏您的css类，以便您可以简单地对此进行测试。在可能的情况下，尽量避免您的js处理样式 3）我用三元if替换了if if else。但实际上，如果您要做的只是将隐藏的类切换为空白，则可以将if替换为切换。 4）与其在HTML中添加onclick监听器，不如通过您的js添加。尽量不要让js疑惑混淆您的html。

document.getElementById('u362').addEventListener('click', function () {
  const tbl1 = document.getElementById("tbl1"),
    tbl2 = document.getElementById("tbl2");
  tbl1.classList.contains('hidden') ?
    (tbl1.classList.remove('hidden'), tbl2.classList.remove('hidden')) :
    (tbl1.classList.add('hidden'), tbl2.classList.add('hidden'));
});

document.getElementById('u317').addEventListener('click', function () {
  const tbl1 = document.getElementById("tbl1"),
    tbl2 = document.getElementById("tbl2");
    tbl2.classList.contains('hidden') ?
      (tbl1.classList.remove('hidden'), tbl2.classList.remove('hidden')) :
      (tbl1.classList.add('hidden'), tbl2.classList.add('hidden'));
});

.hidden {
  display: none;
}

<div id="u362" class="ax_default">u362</div>
<span id="tbl1" class="hidden">Table 1</span>
<span id="tbl2" class="hidden">Table 2</span>
<div id="u317" class="ax_default">u317</div>

Answer 2

您没有显示所有代码，也没有解释您想要做什么。现在，您的两个函数都以相同的方式运行，因为您每次都在两个表上进行操作。

如果我可以“猜测”您想要的内容，那就是单击按钮1时，它将显示表1并隐藏表2。如果单击按钮2，则将显示表2。并隐藏表1。如果您在下面查看代码，那不是您在做什么。您正在显示两个表或在两个实例中都隐藏两个表。

要解决此问题，您可以执行以下操作：

<div onclick="myFunction()" id="u362" class="ax_default">
</div>
<div onclick="myFunction2()" id="u317" class="ax_default">
</div>

<script>
  var a = document.getElementById("tbl");
  var b = document.getElementById("tbl2");

  function myFunction() {
    a.style.display = "block";
    b.style.display = "none";
  }

  function myFunction2() {
    a.style.display = "none";
    b.style.display = "block";
  }
</script>

请注意，除非您希望按钮可以打开和关闭，否则每个功能都不需要if / else，在这种情况下，您可能只需要一个按钮即可。

Answer 3

根据问题中提供的信息，我想您在隐藏或显示表时会出现错误。我认为您必须在以下几行更改代码：

    if (a.style.display === "none") {
      a.style.display = "block";
      b.style.display = "block";
    } else {
      a.style.display = "none";
      b.style.display = "none";
    }

对于这样的事情：

    b.style.display = "none";
    if (a.style.display === "none") {
      a.style.display = "block";
    }

点击按钮a 时，新代码将始终隐藏表b 。表a 的显示状态无关紧要，因为隐藏其他表并不重要。并且仅在被隐藏的情况下更改表a 的显示状态。

您还应该对每个按钮的每个功能进行这些更改。我还建议将所有功能重构为一个独特的功能，并将其用于所需的所有按钮。

Answer 4

我假设仅在单击按钮后表格才可见，相应的表格才会出现。供将来参考，请准确描述您要使用的内容，并且可以使用JsFiddle来显示代码。有时很难从描述中推断出作者的想法：）

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', e => {
    showTable(e.target.dataset.table);
  });
});

function showTable(idTable) {
  const tables = document.querySelectorAll('table');
  tables.forEach(table => {
    table.id === idTable ? table.style.display = 'block' : table.style.display = 'none';
  });
}

table {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<button id="one" data-table="tb1">One</button>
<button id="two" data-table="tb2">Two</button>
<button id="tree" data-table="tb3">three</button>

<table id="tb1">
  <tr>
    <td>One</td>
  </tr>
</table>

<table id="tb2">
  <tr>
    <td>Two</td>
  </tr>
</table>

<table id="tb3">
  <tr>
    <td>Three</td>
  </tr>
</table>

用3个不同的按钮显示3个不同的表

4 个答案: