jquery - 单个 div 触发切换

Question

大家好，我正在尝试创建一个场景，每次单击“切换”时，我都会在“#one”、“#two”和“#three”之间切换

我不知道如何启动 jquery

<div class="switch">swicth</div>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

<style>
#one, #two, #three{
    display:none;
}
</style>

Answer 1

试试这个：

$(".switch").toggle(
    function() { hideAll(); $("#one").show(); },
    function() { hideAll(); $("#two").show(); },
    function() { hideAll(); $("#three").show(); }
);

function hideAll() {
    $("#one, #two, #three").hide();
}

示例小提琴

Answer 2

我会使用类选择器，它允许您拥有任意数量的此类div's。

演示：http: //jsfiddle.net/m7gSn/2/

<div class="switch">swicth</div>
<div id="one" class="myc">1</div>
<div id="two" class="myc">2</div>
<div id="three" class="myc">3</div>  
<style> .myc { display:none; } </style>

JS：

var $myc= $('.myc');
var cp = 0;

$('.switch').click (function () {       
   $myc.hide().eq(cp++).show();       
   if (cp == $myc.length) cp = 0;        
});

Answer 3

我想出了这个。将一个类添加toggle到要在以下之间旋转的 div 之后：

$(".switch").click(function() {
    var toggle = $(".toggle:visible");
    if (toggle[0]) {
       $(toggle[0]).hide();
       var next = $(toggle[0]).next(".toggle");
       if (next[0]) {
         $(next[0]).show();   
       }
       else {
         $(".toggle").first().show();
       }
    }
    else {
        $(".toggle").first().show();
    }        
});

演示

Answer 4

一个小魔术：

$('.switch').click(function() {
    var c = $.data(this, 'index', ($(this).data('index') || 1) % 3 + 1);
    $('div').hide().eq(c-2).show();
});

演示：https ://tinker.io/0d614