Question

我有三种不同的div，我想在它们之间交替。如果显示另一个div，我希望它在另一个出现之前消失。我有两个div的代码，但是当我添加第三个时，它不起作用。

我觉得我在这里缺少一些简单的东西。我搜索了其他线程，但没有任何运气解决方案。任何帮助或重定向到适当的线程将不胜感激。（如果这是一个重复的问题，我会道歉）

http://codepen.io/DogburnDesign/pen/izdwl

HTML：

<button><h1 data-target="#one">One is Green</h1></button>
<button><h1 data-target="#two">Two is Red</h1></button>
<!--<button><h1 data-target="#three">Three is Blue</button>-->
<div class="blocks" id="one"></div>
<div class="blocks" id="two"></div>
<!--<div class="blocks" id="three"></div>-->

jQuery的：

$("h1").click(function(){
var buttonclicked = $(this).data("target");

  if($(".blocks:not(buttonclicked)").is(":visible")){
    $(".blocks").not(buttonclicked).fadeOut(function(){
    $(buttonclicked).toggle();
    });
  } else{
    $(buttonclicked).toggle();
  }
});

Answer 1

因为你在引号中使用了你的变量。你应该把它分开：

$('.blocks:not(' + buttonclicked + ').is('visible')

Answer 2

我认为这可以使它工作，因为错误是在执行集合的方法时调用你的toogle函数，在第一次传递，因为他是可见的，在第二次他确实消失了（因为你有两个元素运行函数）

$("h1").click(function(){
   var buttonclicked = $(this).data("target");
   var blocks = $(".blocks").not(buttonclicked);
   if(blocks.is(":visible")){
      blocks.fadeOut(1);
   }  
  $(buttonclicked).fadeIn(2);
});

使用.not，：not和.toggle显示<div>并删除其他</div>

2 个答案: