多功能切換Jquery

我想製作一個滑塊。我有兩個div，左箭頭和右箭頭。多功能切換Jquery

我的想法是，當點擊左或右箭頭時，活動的div被隱藏，並顯示另一個視圖。
我正在做這個toggle()，它隱藏了第一個視圖，但它沒有顯示第二個視圖。

它需要順利進行，就像旋轉木馬一樣。

這裏是我的JQuery：

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

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

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

下面是HTML的例子：

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

來源

2017-06-03 Spirit_Scarlet

您正在調用函數「A」在回調函數*（函數「B」）* ...上的完全相反的函數。並且'show（）'和'hide（）'的括號之間沒有毫秒延遲。除了一無所有，你期待什麼？曾經聽說過「雙重否定」？ –

看起來你的JavaScript是不正確。

演示鏈接

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

：這些變化要低於應該讓你

來源

2017-06-03 02:28:56

這工作，但我可以每箭只能點擊一次。我無法在左側的箭頭上多次點擊。它只適用於第一次嘗試。 –

沒有。這個腳本只能在每個方向上交替點擊一次。 –

@Spirit_Scarlet希望能爲您提供一個出發點，並展示如何在元素之間平滑過渡。將會在兩個div之間移動，但通過使用[data-attributes]（https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes）應該很容易擴展。 –

下面是「切換」的工作原理。
這個例子意味着一個CSS類從「there」（應用於元素）切換或不存在。

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

的^=運營商的意思是「開始」。

來源

2017-06-03 02:31:17

多功能切換Jquery

回答

相關問題