Question

我试图制作一个div交换器类型的东西，所以生病尝试并为你描述它...

所以这里有元素图像按钮（切换按钮）
一个div，我们称之为div A. 和另一个div，div B（默认隐藏）

这是一个直观表示

[Button image] This Is Div A

当点击按钮时，我希望div A的可见性去＆＃34;隐藏＆＃34;它的显示是＆＃34; none＆＃34;
虽然div B的可见性设置为＆＃34;可见＆＃34;，所以我几乎用div b替换div a

[Button image] This Is Div B

然后当再次点击切换图像时，我希望它再次交换回来（Div B＆C的可见性设置为＆＃34;隐藏＆＃34;并且它的显示设置为＆＃34; none＆＃34;而Div A的可见性设置为＆＃34;可见＆＃34;）然后我希望它继续这样，所以它不断变化。顺便说一句，这一切都在一个固定的div中，所以它将保持在页面的顶部。

我尝试了以下基于对此问题的回答Make an onClick event do something different every other click?

我的尝试是：

Html

<img id="x" src="img/link here">  
<div id="a">This Is Div A </div>  
<div id="b" style="visibility: hidden;"> This Is Div B </div>

Css

    function bindImageClick(){  
    $("#x").unbind("click");  
    $("#x").bind("click", function (event) {  
       document.getElementById("b").style.visibility = "visible";  
       document.getElementById("a").style.visibility = "hidden";  
       document.getElementById("a").style.display= "none";  
        $(this).unbind("click");  
        $(this).bind("click", function(){  
       document.getElementById("a").style.visibility = "visible";  
       document.getElementById("b").style.visibility = "hidden";  
       document.getElementById("b").style.display= "none";  
           bindImageClick();  
        });  
    });  
}  
bindImageClick();

任何帮助都会很棒，出于某些原因我无法缩进代码，因此它具有像我一样的灰色背景视觉表示。

Answer 1

如果您在每次单击图像X时尝试交换A和B的可见性，则默认情况下A是可见的并且默认情况下B被隐藏（因为您似乎已经使用了jquery），因此类似下面的内容应该有效：

$("#x").on("click", function(){
    $("#a, #b").toggle();
});

如果您必须隐藏可见性（jquery切换使用：display），您可以编写自己的切换功能：

$(document).ready(function(){
    $("#x").on("click", function(){
        myToggle($("#a, #b"));
    });

    function myToggle(divsToToggle)
    {
        divsToToggle.each(function(){
            if($(this).css("visibility") === "hidden")
            {
                $(this).css("visibility", "visible");               
            }
            else 
            {
                $(this).css("visibility", "hidden");   
            }
        });
    }
});

Answer 2

查看jquery .toggle（），它会交换所选元素的可见性。你的解释不是很清楚，但这是概念。

<button id="btn1"></button>
<div id="a"></div>

<button id="btn2"></button>
<div id="b"></div>

$(document).ready(function(){
    $("#b").hide(); //hide image B by default
    $("#btn1, #btn2").click(function(){
        $("#a, #b").toggle(); //toggle visibility of both images
    });
});

如何制作图像切换2 divs可见性？

2 个答案: