Question

我在下面的链接上有代码，我需要在任何地方多次使用它。我为酒吧设置了不同的价值，当然它的确错了。因此，错误的答案是为每个范围设置id并多次复制代码。

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

P.S。是的，我知道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(" %");
      }
    });

  });
});

JSFiddle example

Answer 1

https://jsfiddle.net/SeanWessell/8919job4/

为$ 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(" %");
      }
    });

  });

Answer 2

你想循环遍历每个.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 + " %");
            }
        });
    });
});

https://jsfiddle.net/vsp6vuuh/2/

如何在jQuery中创建可重用的代码？

2 个答案: