JQuery点击进度条答案

【问题标题】：JQuery on click Progress BarJQuery点击进度条
【发布时间】：2018-04-04 04:44:54
【问题描述】：

当我单击.trigger 时，我试图让进度条动画运行。我在日志中得到了data-percentage 值，但动画没有运行。它可以在不使用$(this).closest() 的情况下工作，但我无法弄清楚为什么动画没有使用我当前的 JS 代码运行。

$(".list").on("click", ".trigger", function() {
  var e = $(this).closest(".item");
  $(".progressbar").attr("data-percentage", e.find("#percent").text());
  var t = e.find("#percent").text();
  return (
    $(".progressbar").each(function() {
      var n = e,
        r = t;
      console.log(t),
        parseInt(n.data("percentage"), 10) < 2 && (r = 2),
        n.children(".bar").animate({
          width: r + "%"
        }, 500);
    }), !1
  );
});

.item {
  width: 50px;
  height: 50px;
  border: 1px solid;
}

.trigger {
  height: 30px;
  width: 30px;
  border: 3px solid blue;
  cursor: pointer;
}

.progressbar {
  position: relative;
  display: block;
  height: 10px;
  background: #f5f5f5;
}

.bar.money-green {
  background: #3cd3ad;
}

.bar {
  position: absolute;
  display: block;
  height: 100%;
  background: #fcb31c;
  width: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <div class="trigger">
      <p id="percent">22</p>
    </div>
  </div>
</div>

<div class="progressbar" data-percentage="">
  <div class="money-green bar"><span></span></div>
</div>

【问题讨论】：

标签： javascript jquery parseint

【解决方案1】：

我为您更新了代码。干净整洁的方式

您不需要在onclick 函数中返回。您应该在.each 中使用$(this) 来获取当前索引元素

$(".list").on("click", ".trigger", function() {
  var e = $(this).closest(".item");
  var t = e.find("#percent").text();
  $(".progressbar").attr("data-percentage", t);

  $(".progressbar").each(function() {
    $(this).find(".bar").animate({
      width: t + "%"
    }, 500);
  });
});

见codepen

【讨论】：