Jqueryをトグルする複数の関数

Question

スライダを作りたいと思います。私は2つのdiv、左矢印と右矢印を持っています。

私の考えは、左または右の矢印をクリックすると、アクティブなdivが非表示になり、他のビューが表示されるということです。
toggle()でこれを行い、最初のビューを非表示にしますが、2番目のビューは表示されません。

これは、カルーセルのように円滑に進む必要があります。ここで

は私のjQueryのです：ここでは

$("#test2").hide(); 

$("#left").click(function(){ 
    $("#test1").toggle("slide", function(){ 
    $("#test1").show(); 
    $("#test2").hide(); 

    }, function(){ 
    $("#test2").show(); 
    $("#test1").hide(); 
    }); 
}); 

は、HTMLの例である：あなたのJavaScriptが間違っているよう

<div class="row"> 
    <div id="left></div> 
    <div id="test1">image + text</div> 
    <div id="test2">image + text</div> 
    <div id="right"></div> 
</div> 

Answer 1

が見えます。

デモリンク

Working JSFiddle example

HTML

<div class="row"> 
    <div id="left">LEFT</div> 
    <div id="test1">image + text 1</div> 
    <div id="test2">image + text 2</div> 
    <div id="right">RIGHT</div> 
</div> 

はJavaScript

var $test1 = $("#test1"); 
var $test2 = $("#test2"); 

$("#test2").hide(); 

$("#left").click(function() { 
    toggleViews($test2, $test1); 
}); 

$("#right").click(function() { 
    toggleViews($test1, $test2); 
}); 

function toggleViews(viewToHide, viewToShow) { 
    $(viewToHide).hide("slide", function() { 
    $(viewToShow).show("slide"); 
    }); 
} 

：あなたがなりたい場所の変更は、以下のあなたを取得する必要があります

Answer 2

「トグル」の仕組みは次のとおりです。
この例では、「there」（要素に適用されている）または存在しないCSSクラスを切り替えることを示しています。

HTML：

<div class="row"> 
    <div id="left></div> 
    <div id="test1">image + text</div> 
    <div id="test2" class="hidden">image + text</div> 
    <div id="right"></div> 
</div> 

はCSS：

.hidden{ 
    display:none; 
} 

JS：

$("#left, #right").click(function(){ 
    $(".row div[id^='test']").toggleClass("hidden"); 
}); 

^=オペレータは、 "で始まる" を意味します。