如果打开另一张图像则隐藏图像，反之亦然

Question

我有 2 个图像（Image1、Image2）的代码，如果单击其他 2 个图像，这两个图像都会打开，最后有

onclick

和 java 部分，如下所示：

<table style="whatever">
    <tbody>
        <tr style="whatever"">

            <td><a href="link to game1 when the image is clicked" alt="Game1" target="blank" onclick="AfficherCacher('Image1')"> <img src="the image clicked to open Game1+Image1.jpg" width="1689" height="955" class="img-fluid atto_image_button_text-bottom"></a><br></td>
           <td><a href="link to game2 when the image is clicked" alt="Game2" target="blank" onclick="AfficherCacher('Image2')"> <img src="the image clicked to open Game2+Image2.jpg" width="1689" height="955" class="img-fluid atto_image_button_text-bottom"></a><br></td>
        </tr>
    </tbody>
</table>

然后

</table>
   <table style="whatever">
    <tbody>
        <tr style="whatever">
            <td>
                <div id="Image1">
                    <ul>
                        <img src="Image1.jpg">
                    </ul>
                </div>
            </td>
</table>
   <table style="whatever">
    <tbody>
        <tr style="whatever">
            <td>
                <div id="Image2">
                    <ul>
                        <img src="Image2.jpg">
                    </ul>
                </div>
            </td>

最后的 JavaScript 部分使其一切正常：

<p>
    <script type="text/javascript">
        // <![CDATA[
        function AfficherCacher(texte) {
            var test = document.getElementById(texte).style.display;
            if (test == "block") {
                document.getElementById(texte).style.display = "none";
            } else {
                document.getElementById(texte).style.display = "block";
            }
        }
        // ]]>
    </script>
</p>

唯一的是Image1和Image2可以同时显示在页面上，这是我不想要的。我想打开Image2使Image1消失，并打开Image1使Image2消失。

我不知道该用什么。

预先感谢您的帮助。

我尝试过发明“if”条件，但我不懂 JavaScript（或 CSS），所以我会盲目地去做，而且我显然做错了什么。我不知道我能使用什么以及什么存在/有效。

Answer 1

您应该在此处使用数据属性，这将使事情变得更容易。
然后，您可以使用

classList.toggle

函数根据条件应用类或删除类。

在下面的代码中，我将单击的按钮的数据属性值与每个图像进行比较，并隐藏不具有相同数据属性值的每个图像。这甚至在使用 100 张图像时也有效。

const Buttons = document.querySelectorAll('menu button');
const Images = document.querySelectorAll('img');

Buttons.forEach(button => {
  button.addEventListener('click', function() {
    let dataIndex = this.dataset.image;
    Images.forEach(image => {
      let imageIndex = image.dataset.image;
      image.classList.toggle('d-none', imageIndex !== dataIndex);
    })
  })
})

.d-none {
  display: none;
}

<menu>
  <li><button data-image="1">Show Image 1</button></li>
  <li><button data-image="2">Show Image 2</button></li>
</menu>

<img data-image="1" class="d-none" src="https://fakeimg.pl/200/ff0000/FFFFFF">
<img data-image="2" class="d-none" src="https://fakeimg.pl/200/0000ff/FFFFFF">