0

我试图有 3 个按钮，当用户单击其中一个时，它会显示相应的表格并隐藏另外两个。

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

<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>

实际结果真的很奇怪，与我正在尝试做的事情没有任何相似之处。

4

4 回答 4

0

这是您清理的代码片段。正如@kojow7 上面提到的，他们基本上只基于一张桌子或另一张桌子做同样的事情。需要注意的事项：1）在函数中使用更具描述性的变量名称 2）创建一个隐藏的 css 类，以便您可以简单地对其进行测试。如果可能的话，尽量让你的 js 不处理样式 3）我用三元 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>

于 2019-06-20T20:15:01.267 回答
0

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

如果我可以“猜测”到您可能想要什么，那就是当您单击按钮 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，在这种情况下，您可能只需要一个按钮。

于 2019-06-20T20:15:40.683 回答
0

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

    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的显示状态。

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

于 2019-06-20T20:19:46.800 回答
0

我假设只有在单击按钮后表格才可见，相应的表格才会出现。为了将来参考，请准确描述您想要使用的内容，您可以使用 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>

于 2019-06-20T20:36:49.423 回答