单击按钮时隐藏 DIVS答案

【问题标题】：Hiding DIVS when clicking button单击按钮时隐藏 DIVS
【发布时间】：2018-05-30 07:18:08
【问题描述】：

我有 3 个 div
每个 div 里面都有一张图片
我有 3 个按钮
单击其中一个按钮时，一个 div 应该是可见的，而其他的应该是隐藏的

我设法通过搜索一些我可以适应的 javascript 代码来做一些事情，并且我以某种方式做到了；但它不能正常工作。

当按钮一旦按预期工作，但当它连续单击两次时，结果会在布局崩溃中反转，导致两个 div 显示而不是隐藏。

HTML 代码

<input id="hideshow" type="button" value="Button one" />
<input id="hideshow2" type="button" value="Button two" />
<input id="hideshow3" type="button" value="Button third" />

<div id="punto1">
Main content
</div>

<div id="punto2">
Second div
</div>

<div id="punto3">
Third div
</div>

查询代码

jQuery(document).ready(function(){
        jQuery('#hideshow').on('click', function(event) {        
             jQuery('#punto1').toggle('show');
             jQuery('#punto2').toggle('hide');
             jQuery('#punto3').toggle('hide');
        });
    });

jQuery(document).ready(function(){
        jQuery('#hideshow2').on('click', function(event) {      
             jQuery('#punto1').toggle('hide');
             jQuery('#punto2').toggle('show');
             jQuery('#punto3').toggle('hide');
        });
    });

jQuery(document).ready(function(){
        jQuery('#hideshow3').on('click', function(event) {      
             jQuery('#punto1').toggle('hide');
             jQuery('#punto2').toggle('hide');
             jQuery('#punto3').toggle('show');
        });
    });

CSS 代码

#punto2, #punto3 { display: none; }

有没有办法通过双击按钮来解决这个问题？

非常感谢

【问题讨论】：

请在此处包含“minimal reproducible example”代码，在您的问题中，不要仅仅期望人们点击互联网上的链接来为您提供帮助。
感谢您的回答。我通过在帖子中添加完整代码来解决这个问题。我认为 JSFiddle 是展示它的最佳和最简单的方式。
不支持将字符串传递给toggle，它不是持续时间字符串（例如“fast”或“slow”），因此它被解释为布尔值。换句话说，是的。

标签： javascript

【解决方案1】：

使用 .toggle() 时不需要显示和隐藏，.toggle() 对状态进行切换。使用 .hide() 和 .show() 隐藏和显示 div。

【讨论】：

感谢 user2780362，感觉很尴尬，但非常感谢
没有必要感到尴尬，这就是这个地方的目的。您可能还想查看下面的@DonCarlosII 帖子。他是对的，这个概念不会扩展。

【解决方案2】：

只需使用隐藏或显示功能更改切换。

您在此处使用的切换功能将在隐藏状态和显示状态之间切换，因此当您单击第一个 div 时隐藏 div 并显示其他两个 div，当您第二次单击时第一个 div 将是显示，另外两个将被隐藏...

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
         jQuery('#punto1').show();
         jQuery('#punto2').hide();
         jQuery('#punto3').hide();
    });
});

jQuery(document).ready(function(){
        jQuery('#hideshow2').on('click', function(event) {      
             jQuery('#punto1').hide();
             jQuery('#punto2').show();
             jQuery('#punto3').hide();
        });
    });

jQuery(document).ready(function(){
        jQuery('#hideshow3').on('click', function(event) {      
             jQuery('#punto1').hide();
             jQuery('#punto2').hide();
             jQuery('#punto3').show();
        });
    });

【讨论】：

非常感谢，效果很好。我的英语有点差，我不明白代码上“切换”的真正含义，这有点明显，但我搞砸了。再次感谢。

【解决方案3】：

此解决方案有效：

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#punto1').show();
        jQuery('#punto2').hide();
        jQuery('#punto3').hide();
    });
});

jQuery(document).ready(function(){
    jQuery('#hideshow2').on('click', function(event) {      
        jQuery('#punto1').hide();
        jQuery('#punto2').show();
        jQuery('#punto3').hide();
    });
});

jQuery(document).ready(function(){
    jQuery('#hideshow3').on('click', function(event) {      
        jQuery('#punto1').hide();
        jQuery('#punto2').hide();
        jQuery('#punto3').show();
    });
});

但是，它不会轻易扩展。随着您添加越来越多的元素，您将不必要地膨胀您的 javascript 文件。

您可能想尝试使用数据值来指定应显示的元素。通过这种方式，您可以轻松地遍历图像计数并为每个图像重用代码。像这样的：

<input class="hideshow" type="button" value="Button one" data-button-id="1"/>
<input class="hideshow" type="button" value="Button two" data-button-id="2"/>
<input class="hideshow" type="button" value="Button third" data-button-id="3"/>

<div id="punto1" class="image-container">
    Main content
</div>

<div id="punto2" class="image-container">
    Second div
</div>

<div id="punto3" class="image-container">
    Third div
</div>

JS：

jQuery(document).ready(function(){
    jQuery('.hideshow').on('click', function(event) {   
        var buttonID = this.dataset.buttonId;
        var containerID = "#punto" + buttonID;
        //Close all open containers
        jQuery(".image-container").hide();
        jQuery(containerID).show();
    });
});

当然还有 CSS：

#punto2, #punto3 { display: none; }

您可以在这里试用： https://jsfiddle.net/ab8b7g4w/1/

【讨论】：

【解决方案4】：

我不会使用 show 和 hide 两个类。我发现它增加了混乱。我会选择一个默认显示或隐藏的状态。并在需要时添加或删除一个类。在下面的示例中，默认状态是显示，并且向其他元素添加了一个类，使其隐藏。

其次，我不会使用 CSS id。使用类。这更灵活。如果您需要添加或删除幻灯片，您只需更新标记而不接触 js。在下面的示例中，如果添加了另一个按钮和 div，它将正常工作（前提是它们被添加到相同的位置）

这里的神奇之处在于找到被点击元素的索引，以知道要显示哪个幻灯片索引。

const index = buttonsArray.findIndex(el => el === clickedEl);
...
divsArray[index].className = "image-container";

下面的例子是在没有 jquery 的情况下编写的。但是可以随意混入 jquery，因为切换之类的任务会更容易。我发现在没有任何库的情况下首先要理解的事情不会那么令人困惑，然后添加诸如 toggle 或 $('.image-button')' 之类的辅助函数。

<button class="image-button">One</button>
<button class="image-button">Two</button>
<button class="image-button">Three</button>
<button class="image-button">Four</button>

<div class="image-container">One</div>
<div class="image-container image-hidden">Two</div>
<div class="image-container image-hidden">Three</div>
<div class="image-container image-hidden">Four</div>

<script>

const buttons = document.querySelectorAll('.image-button');
const buttonsArray = Array.from(buttons); // convert to array to make findIndex available
const divs = document.querySelectorAll('.image-container');
const divsArray = Array.from(divs); // convert to array to make findIndex available

function handleClick(e) {
  const clickedEl = e.target;

  // find the index of the clicked button
  const index = buttonsArray.findIndex(el => el === clickedEl);

  // hide all divs
  divsArray.forEach((el) => {
    el.className = "image-container image-hidden";
  });

  // reveal the corresponding div
  divsArray[index].className = "image-container";
  console.log('click handled', index);
}

buttonsArray.forEach(el => {
  el.addEventListener('click', handleClick);
});

</script>

<style>
.image-container {
  background: orange;
  width: 100px;
  height: 100px;
}
.image-hidden {
  display: none;
}
</style>

【讨论】：