jQuery show（）在hide（）后不工作（）

Question

我试图在点击图像后显示带有内容的div，但是当我的页面被加载后，我尝试点击，则没有任何反应。有趣的是，如果我的页面正在加载不隐藏的内容，然后我会隐藏（）和show（）id控制台后，它完美的作品。我究竟做错了什么？

$(document).ready(function() { 
$('.content-flowers').hide() 

var first = $(".content-flowers").children()[0]; 
var second = $(".content-flowers").children()[1]; 
var third = $(".content-flowers").children()[2]; 

var firstImg = $(".flower-image")[0]; 
var secondImg = $(".flower-image")[1]; 
var thirdImg = $(".flower-image")[2]; 

$(firstImg).click(function(){ 
$(first).toggle(1000); 
}) 

/*$(".flower-image").click(function() { 
$('.content-flowers').show(1000); 
});*/ 

}); 

最新评论功能工作也不错，但函数加载所有三个的div的内容，我想以点击1张图像后内容的第一个div将显示

Answer 1

你说注释版本的作用不同于它同时执行全部三个版本，但早期版本不起作用。

他们做了非常不同的事情。您未注释掉的代码看起来在孩子.content-flowers元素：

var first = $(".content-flowers").children()[0]; 

但你注释掉的版本适用于.content-flowers元素本身：

$('.content-flowers').show(1000); 

我怀疑它是.children()部分是使它失败。我想你想：

var first = $(".content-flowers")[0]; 
// No .children() here ----------^ 

...作为最小的变化。

这就是说，虽然，整个事情可以大大简化：

$(document).ready(function() { 
    $('.content-flowers').hide() 

    // Get the flower images 
    var images = $(".flower-image"); 

    // When a flower image is clicked...  
    images.on("click", function() { 
     // Determine its index relative to the others... 
     var index = images.index(this); 

     // And show that content 
     $(".content-flowers").eq(index).toggle(1000); 
    }); 
}); 

Answer 2

您已经在变量第一次采用了jQuery函数。所以请先尝试一下。（1000）。删除$符号。