带有toggle jQuery的多个功能

Question

我想制作一个滑块。我有两个divs，左箭头和右箭头。

我的想法是，当单击左箭头或右箭头时，有效的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>

Answer 1

这是"切换"的工作方式。
此示例暗示CSS类从" wendy"(应用于元素上(或不存在的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");
});

^=操作员的意思是"以"。

Answer 2

看起来您的JavaScript不正确。下面的更改应带您去哪里：

演示链接

工作jsfiddle示例

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