0

我有一个带有文本的动态帖子循环，我想在其中放置一个抽奖动画按钮。循环中的每个帖子都有一个动态数据属性data-post_id。单击该按钮时，将向该特定按钮添加一个类，再次单击该按钮时，将其删除。

我的问题是，如果我使用data-post_idlottielocation参数的值，什么都不会显示，如果我使用按钮类作为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>

4

0 回答 0