多功能切换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

回答

相关问题