Javascript 如何在jQuery中生成可重用代码？

我在下面的链接上有代码，我需要在任何地方使用它几次。我为条设置了不同的值，当然它是错误的。因此，错误答案被设置为每个跨度的id，并为它们复制代码数次

请给我一个如何重写代码的技巧，我不需要一次又一次地重复

是的，我知道progressbar.js和其他库，但在这里我需要从html元素处理bar

$(document).ready(function() {
  $(".blackbar > span").each(function() {
    var percentWidth = $('.blackbar > span').data('width');
    $(this).animate({
      width: $(this).data("width") + "%"
    }, 800);
    $({
      countNum: 0
    }).animate({
      countNum: percentWidth
    }, {
      duration: 800,
      easing: 'linear',
      step: function() {
        $('.barvalue').text(Math.floor(this.countNum)).append(" %");
      },
      complete: function() {
        $('.barvalue').text(this.countNum).append(" %");
      }
    });

  });
});

为$span和$barvalue设置变量

  $(".blackbar > span").each(function() {
    var $span = $(this);
    var $barvalue = $span.closest('.b-item__barbox.barbox').find('.barvalue');
    var percentWidth = $span.data('width');
    $span.animate({
      width: percentWidth + "%"
    }, 800);
    $({
      countNum: 0
    }).animate({
      countNum: percentWidth
    }, {
      duration: 800,
      easing: 'linear',
      step: function() {
        $barvalue.text(Math.floor(this.countNum)).append(" %");
      },
      complete: function() {
        $barvalue.text(this.countNum).append(" %");
      }
    });

  });

---

您希望在每个

.barbox

上循环，然后找到条形图的范围和值的范围，并适当地使用它们

$(document).ready(function(){
    $(".barbox").each(function() {
        var $barbox = $(this);
        var $barSpan = $barbox.find('.blackbar > span');
        var $barValue = $barbox.find('.barvalue');
        var percentWidth = $barSpan.data('width');
        $barSpan.animate({
                width: percentWidth + "%"
        }, 800);
        $({countNum: 0}).animate({countNum: percentWidth}, {
            duration: 800,
            easing: 'linear',
            step: function() {
                $barValue.text(Math.floor(this.countNum) + " %");
            },
            complete: function() {
                $barValue.text(this.countNum + " %");
            }
        });
    });
});

---

您可能还希望在问题中包含HTML和CSS，而不是需要JSFIDLE才能完全理解。