Question

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

我的想法是，当点击左箭头或右箭头时，隐藏活跃的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类从“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");
});

^=运算符的意思是“以...开头”。

Answer 2

看起来您的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");
  });
}

使用toggle Jquery的多个函数

2 个答案: