jQuery單擊進度條

Question

單擊.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> 

Answer 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);
  });
});

參見密碼筆