Question

我有3个div
每个div都有一个图像
我有3个按钮
单击其中一个按钮时，应显示一个div，隐藏其他按钮

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

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

HTML CODE

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

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

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

非常感谢

Answer 1

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

Answer 2

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

您使用的切换功能将在隐藏状态和显示状态之间切换，因此当您单击第一个时隐藏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();
        });
    });

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

Answer 4

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

其次我不会使用CSS id。使用类。这更灵活。如果您需要添加或删除幻灯片，只需更新标记而不触及js。在下面的例子中，如果添加了另一个按钮和div，它就会起作用（假设它们被添加到同一位置）

这里的神奇之处在于找到单击元素的索引，以了解要显示的幻灯片索引。

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

以下示例是在没有jquery的情况下编写的。但是，随着像切换这样的任务变得更容易，可以随意混合使用jquery。我发现在没有任何库的情况下首先理解的东西不那么令人困惑，然后添加辅助函数，如toggle或$('.image-button')＆＃39;。

＆＃13;

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

＆＃13;

单击按钮时隐藏DIVS

4 个答案: