Question

我想创建一些带有从json检索到的数据的css卡。迭代很好，但我的动画有问题。当用户按下按钮时，该卡会制作动画并显示更多信息。问题是动画只能与第一张卡一起使用。我该如何解决？谢谢。

HERE您可以找到完整的代码。

这是链接到信息按钮的脚本：

(function(){
'use strict';

var $mainButton = $(".main-button"),
    $closeButton = $(".close-button"),
    $buttonWrapper = $(".button-wrapper"),
    $ripple = $(".ripple"),
    $layer = $(".layered-content");

$mainButton.on("click", function(){
    $ripple.addClass("rippling");
        $buttonWrapper.addClass("clicked").clearQueue().delay(1500).queue(function(){
        $layer.addClass("active");
    });
});

$closeButton.on("click", function(){
    $buttonWrapper.removeClass("clicked");
    $ripple.removeClass("rippling");
    $layer.removeClass("active");
});
})();

Answer 1

好的，你的问题是你没有发现好的元素。我修改了您的script.js

 $(document).on("click",".main-button", function(){
            $(this).find(".ripple").addClass("rippling");
            $(this).closest("main").find(".button-wrapper").addClass("clicked").clearQueue().delay(1500).queue(function(){
            $(this).closest("main").find(".layered-content").addClass("active");
        });
    });

请尝试：http://plnkr.co/edit/qZmi3jJS4WVcN676OSP2

关闭更新

尝试

$(document).on("click",".close-button", function(){
        $(this).closest("main").find(".button-wrapper").removeClass("clicked");
        $(this).closest("main").find(".ripple").removeClass("rippling");
        $(this).closest("main").find(".layered-content").removeClass("active");
    });

link：http://plnkr.co/edit/WKtJUqOwkEGnhb2Zc1HZ

JQuery不能使用后创建的元素

1 个答案: