我想用从 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");
});
})();
最佳答案
好的,你的问题是你没有检测到好的元素。我已经修改了你的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");
});
关于javascript - JQuery 不适用于创建后的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34788371/