问题描述
我有一个带有文本的动态后期循环,我想在其中放置一个乐透动画按钮。循环中的每个帖子都有一个动态数据属性 data-post_id
。当按钮被点击时,一个类被添加到那个特定的按钮上,当它再次被点击时,它被删除。
我的问题是,如果我对 lottie data-post_id
参数使用 location
值,则不会显示任何内容,如果我使用按钮类作为 location
参数,则lottie 按钮只出现在循环中的第一篇文章中。
我做错了什么?
这是我目前得到的:
/* Play an animation on each click */
var iconContainer = document.querySelector(".bodymovinanim");
var buttonNumber = iconContainer.getAttribute('data-post_id');
// var buttonNumber = document.querySelector(".bodymovinanim");
var buttonAnim = bodymovin.loadAnimation({
container: buttonNumber,renderer: "svg",loop: false,autoplay: false,path: "https://assets8.lottiefiles.com/datafiles/SkdS7QDyJTKTdwA/data.json"
});
// Check initial state
if (iconContainer.classList.contains("liked")) {
buttonAnim.goToAndStop(50,true);
} else {
buttonAnim.goToAndStop(0,true);
}
// click animation
iconContainer.addEventListener("click",function () {
if (iconContainer.classList.contains("liked")) {
buttonAnim.playSegments([50,0],true);
iconContainer.classList.remove("liked");
} else {
buttonAnim.playSegments([0,50],true);
iconContainer.classList.add("liked");
}
});
body {
font-family: Roboto;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.post-loop {
display: flex;
flex-direction: row;
}
.post {
padding: 15px;
margin: 5px;
border: 1px solid gray;
}
.bodymovinanim {
max-width: 50px;
margin-bottom: 30px;
cursor: pointer;
}
p {
font-size: 12px;
text-transform: uppercase;
opacity: 0.6;
letter-spacing: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie_svg.min.js"></script>
<div class="post-loop">
<div id="post-1" class="post">
<p>Post 1</p>
<div class="bodymovinanim" data-post_id="44178"></div>
</div>
<div id="post-2" class="post">
<p>Post 2</p>
<div class="bodymovinanim" data-post_id="44179"></div>
</div>
</div>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)