我有一个带有文本的动态后期循环，我想在其中放置一个乐透动画按钮。循环中的每个帖子都有一个动态数据属性 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>