jQuery animatedでグラフ作成をLOOPさせると、変数がみんな同じ値になってしまう

Question

jQuery のAnimationを使ったJavascript JQMeterJQMeterを、phpでLoopさせて複数のグラフを表示させたいと思っています。
動作デモ

棒グラフを０からカウントアップさせるのですが、そこに表示される数字の単位は%となっており、ここに、グラフに毎に変数を与え、数字と共に表示させたいと思っています。以下の様に、単位（tani）という変数を与え、%を変数に置き換え、グラフ単体では問題なく表示されました。

$({ Counter: 0 }).animate({ Counter: $(elem).children('.outer-therm').children('.inner-therm').children().text() }, {
  				duration : counterSpeed,
  				easing : 'swing',
  				step : function() {
   					$(elem).children('.outer-therm').children('.inner-therm').children().text(Math.ceil(this.Counter) + '%');
  				}
			});

を↓

tani = options.tani;
と設定した上で
$({ Counter: 0 }).animate({ Counter: $(elem).children('.outer-therm').children('.inner-therm').children().text() }, {
  				duration : counterSpeed,
  				easing : 'swing',
  				step : function() {
   					$(elem).children('.outer-therm').children('.inner-therm').children().text(Math.ceil(this.Counter) + tani);

しかし、これをLOOPでグラフを複数作成しようとすると、単位(tani）がすべてのグラフで、一番最後に与えらえた値になってしまいます。
この、単位(tani)以外の変数は、それぞれのグラフに与えた値で処理されています。

javascriptでループの中に関数があると変数が最後の値になるよ？
の案件だと思うのですが、これに合わせて設定をしてみたのですが、うまくいきません。

アドバイスをいただきたく、よろしくお願いします。

/*

Title:		jQMeter: a jQuery Progress Meter Plugin
Author:		Gerardo Larios
Version:	0.1
Website:	http://www.gerardolarios.com/jqmeter
License: 	Dual licensed under the MIT and GPL licenses.

*/

(function($) {

	//Extend the jQuery prototype
    $.fn.extend({
        jQMeter: function(options) {
            if (options && typeof(options) == 'object') {
                options = $.extend( {}, $.jQMeter.defaults, options );
            }
            this.each(function() {
                new $.jQMeter(this, options);
            });
            return;
        }
    });
	$.jQMeter = function(elem, options) {
		//Define plugin options
		goal = parseInt((options.goal).replace(/\D/g,''));
		raised = parseInt((options.raised).replace(/\D/g,''));
		min = parseInt((options.min).replace(/\D/g,''));
		width = options.width;
		height = options.height;
		bgColor = options.bgColor;
		tani = options.tani;//これを追加
		meterOrientation = options.meterOrientation;
		animationSpeed = options.animationSpeed;
		counterSpeed = options.counterSpeed;
		displayTotal = options.displayTotal;
		total = ((raised - min) / (goal - min)) * 100;

		/*
		 * Since the thermometer width/height is set based off of
		 * the total, we force the total to 100% if the goal has
		 * been exceeded.
		 */
		if(total >= 100) {
			total = 100;
		}

		//Create the thermometer layout based on orientation option
		if(meterOrientation == 'vertical') {

			$(elem).html('<div class="therm outer-therm vertical"><div class="therm inner-therm vertical"><span style="display:none;">' + total + '</span></div></div>');
			$(elem).children('.outer-therm').attr('style','width:' + width + ';height:' + height + ';background-color:' + bgColor);
			$(elem).children('.outer-therm').children('.inner-therm').attr('style','background-color:' + barColor + ';height:0;width:100%');
			$(elem).children('.outer-therm').children('.inner-therm').animate({height : total + '%'},animationSpeed);

		} else {
			$(elem).html('<div class="therm outer-therm"><div class="therm inner-therm"><span style="display:none;">' + total + '</span></div></div>');
			$(elem).children('.outer-therm').attr('style','width:' + width + ';height:' + height + ';background-color:' + bgColor);
			$(elem).children('.outer-therm').children('.inner-therm').attr('style','background-color:' + barColor1 + ';height:' + height + ';width:0');
			$(elem).children('.outer-therm').children('.inner-therm').animate({width : total + '%'},animationSpeed);

		}

		//If the user wants the total percentage to be displayed in the thermometer
		if(displayTotal) {

			//Accomodate the padding of the thermometer to include the total percentage text
			var formatted_height = parseInt(height);
			var padding = (formatted_height/2) - 13 + 'px 10px';

			if(meterOrientation != 'horizontal'){
			  padding = '10px 0';
			}

			$(elem).children('.outer-therm').children('.inner-therm').children().show();
			$(elem).children('.outer-therm').children('.inner-therm').children().css('padding', padding);

			//Animate the percentage total. Borrowed from: http://stackoverflow.com/questions/23006516/jquery-animated-number-counter-from-zero-to-value
			$({ Counter: 0 }).animate({ Counter: raised }, {
  				duration : counterSpeed,
  				easing : 'swing',
  				step : function() {
   					$(elem).children('.outer-therm').children('.inner-therm').children().text(Math.ceil(this.Counter) + tani);//ここを変更
  				}
			});
		}

		//Add CSS
		$(elem).append('<style>.therm{height:30px;border-radius:5px;}.outer-therm{margin:20px 0;}.inner-therm span {color: #fff;display: inline-block;float: right;font-family: Trebuchet MS;font-size: 20px;font-weight: bold;}.vertical.inner-therm span{width:100%;text-align:center;}.vertical.outer-therm{position:relative;}.vertical.inner-therm{position:absolute;bottom:0;}</style>');

	};

	//Set plugin defaults
	$.jQMeter.defaults = {

		width : '100%',
		height : '50px',
		bgColor : '#444',
		barColor : '#bfd255',
		meterOrientation : 'horizontal',
		animationSpeed : 2000,
		counterSpeed : 2000,
		displayTotal : true

	};

})(jQuery);

Answer 1

こんにちは、
下のコードの箇所を

//Animate the percentage total. Borrowed from: http://stackoverflow.com/questions/23006516/jquery-animated-number-counter-from-zero-to-value
$({ Counter: 0 }).animate({ Counter: raised }, {
    duration : counterSpeed,
    easing : 'swing',
    step : function() {
            $(elem).children('.outer-therm').children('.inner-therm').children().text(Math.ceil(this.Counter) + tani);//ここを変更
    }
});

こちらに変更してみたらどうでしょう？

//Animate the percentage total. Borrowed from: http://stackoverflow.com/questions/23006516/jquery-animated-number-counter-from-zero-to-value
$({ Counter: 0, tani: tani }).animate({ Counter: raised }, {
    duration : counterSpeed,
    easing : 'swing',
    step : function() {
            $(elem).children('.outer-therm').children('.inner-therm').children().text(Math.ceil(this.Counter) + this.tani);//ここを変更
    }
});

$({ Counter: 0, tani: tani })と代入してやることで、this.taniからそれぞれオプションで設定したtaniを取得できると思います。

Comments

[TEKA-e1]

fake_shibe様、ありがとうございました。Loopの部分の単位がそれぞれ表示されるようになりました。

ただ、1つだけ同じグラフでループをさせずに表示しているものがあるのですが、同じJSを使うと、グラフに表示が、数字も単位も合わせてNanとなってしまいます。

ループされる場合とされない場合の条件分けをどのようにすれば良いでしょうか？
よろしくお願いします。

[fake_shibe]

NaNになる場合には、単位を表示しないということだと解釈しました。
以下のように変更してみたらどうでしょう？

$({ Counter: 0, tani: tani }).animate(
{ Counter: raised },
{
duration: counterSpeed,
easing: "swing",
step: function () {
if (is_NaN(Math.ceil(this.Counter) + this.tani)) {
$(elem).children(".outer-therm").children(".inner-therm").children().text(Math.ceil(this.Counter));
} else {
$(elem)
.children(".outer-therm")
.children(".inner-therm")
.children()
.text(Math.ceil(this.Counter) + this.tani);
}
},
}
);
function is_NaN(x) {
return x !== x;
}

[TEKA-e1]

ありがとうございました！しっかり表示できるようになりました。
本当にありがとうございました！