Question

我正在尝试在点击图片后显示包含内容的div，但是当我的页面加载并且我尝试点击时没有任何反应。有趣的是，如果我的页面加载时没有隐藏的内容，那么我将执行hide（）并在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函数。所以请尝试first.toggle（1000）。删除$ sign。

隐藏（）之后jQuery show（）不起作用

2 个答案: