Динамическая переменная в jquery

352

26 февраля 2017, 10:17

Возможно ли на jquery реализовать динамическую переменную подобно angular js? Т.е. при изменении этой переменной она сразу выводится, например у меня есть некоторый плагин, там эта переменная меняется, как мне ее вывести вне плагина при условии что она изменилась? Сам плагин: В нем меняется переменная, которая задается в параметре инициализации плагина - varName. Идея в том, чтобы человек мог просто создать переменные, а потом обычным арифметическим выражением их сложить / умножить и тд.

(function($) { 
  $.fn.extend({ 
    Counter: function(options) { 
      this.defaults = { 
        SliderMin: 1, 
        SliderMax: 50, 
        SliderValue: 4, 
        varName: 'varSliderValue' 
      }; 
      var settings = $.extend({}, this.defaults, options); 
      return this.each(function() { 
        var CounterWrapper = this; 
        // Флаг начала отсчета 
        var counterInc = false; 
        var counterDec = false; 
        var slider = $(".ui-widget-content", CounterWrapper); 
        $(".ui-widget-content", CounterWrapper).slider({ 
          range: "min", 
          value: settings.SliderValue, 
          min: settings.SliderMin, 
          max: settings.SliderMax, 
          slide: function(event, ui) { 
            $(".counter", CounterWrapper).val(ui.value).trigger("change"); 
          } 
        }); 
        window[settings.varName] = slider.slider("value"); 
        $(".counter", CounterWrapper).val(slider.slider("value")); 
        $(".counter", CounterWrapper).on("keyup", function() { 
          slider.slider("option", "value", $(".counter", CounterWrapper).val()); 
        }) 
 
 
        // Счетчик 
        var counter = slider.slider("value"); 
        var idproc 
 
        // Зажата клавиша мыши 
        $(".inc", CounterWrapper).mousedown(function() { 
          counterInc = true; 
          counter = slider.slider("value") 
          idproc = setInterval(calculation, 50) 
        }); 
        $(".dec", CounterWrapper).mousedown(function() { 
          counterDec = true; 
          counter = slider.slider("value") 
          idproc = setInterval(calculation, 50) 
        }); 
 
        // Отпущена клавиша мыши 
        $(".inc", CounterWrapper).mouseup(function() { 
          counterInc = false; 
        }).mouseleave(function() { 
          counterInc = false; 
        }); 
        $(".dec", CounterWrapper).mouseup(function() { 
          counterDec = false; 
        }).mouseleave(function() { 
          counterDec = false; 
        }); 
        // Подсчет секунд 
        function calculation() { 
          if (counterInc && counter != settings.SliderMax) { 
            $(".counter", CounterWrapper).val(++counter); 
            slider.slider("option", "value", counter).val(); 
          } else if (counterDec && counter != settings.SliderMin) { 
            $(".counter", CounterWrapper).val(--counter); 
            slider.slider("option", "value", counter).val(); 
          } else { 
            clearInterval(idproc); 
          } 
        } 
 
      }); 
    } 
  }); 
})(jQuery); 
$('#children-slider').Counter({ 
  SliderMax: 100 
}); 
$('.var').html(varSliderValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> 
<div id="children-slider"> 
  <div class="ui-widget-content"></div> 
  <button class="inc">Увеличить</button> 
  <input type="text" class="counter"> 
  <button class="dec">Уменьшить</button> 
</div> 
<div>та самая переменная: <span class="var"></span></div>

Answer 1

Не самое логичное решение, но все-же, использовать trigger change на изменении input куда вводится переменная:

$(sliderInput).on('keyup change', function () {
                window[settings.varName] = $(sliderInput).val();
                recount ();
});

(function ($) { 
	$.fn.extend({ 
		Counter: function (options) { 
			this.defaults = { 
				SliderMin: 1, 
				SliderMax: 50, 
				SliderValue: 4, 
				varName: "varSliderValue" 
			}; 
			var settings = $.extend({}, this.defaults, options); 
			return this.each(function () { 
				var CounterWrapper = this; 
				// Флаг начала отсчета 
				var counterInc = false; 
				var counterDec = false; 
				var slider = $(".ui-widget-content", CounterWrapper); 
				var sliderInput = $(".counter", CounterWrapper); 
				slider.slider({ 
					range: "min", 
					value: settings.SliderValue, 
					min: settings.SliderMin, 
					max: settings.SliderMax, 
					slide: function (event, ui) { 
						sliderInput.val(ui.value).trigger("change"); 
					} 
				}); 
				sliderInput.val(slider.slider("value")); 
				sliderInput.on("keyup", function () { 
					slider.slider( "option", "value", sliderInput.val()); 
				}) 
				// Счетчик 
				var counter = slider.slider("value"); 
				var idproc 
 
				// Зажата клавиша мыши 
				$(".inc", CounterWrapper).mousedown(function () { 
					counterInc = true; 
					counter = slider.slider("value") 
					idproc = setInterval(calculation, 50) 
				}); 
				$(".dec", CounterWrapper).mousedown(function () { 
					counterDec = true; 
					counter = slider.slider("value") 
					idproc = setInterval(calculation, 50) 
				}); 
 
				// Отпущена клавиша мыши 
				$(".inc", CounterWrapper).mouseup(function () { 
					counterInc = false; 
				}).mouseleave(function () { 
					counterInc = false; 
				}); 
				$(".dec", CounterWrapper).mouseup(function () { 
					counterDec = false; 
				}).mouseleave(function () { 
					counterDec = false; 
				}); 
				// Подсчет секунд 
				function calculation() { 
					if (counterInc && counter != settings.SliderMax) { 
						sliderInput.val(++counter).trigger("change"); 
						slider.slider( "option", "value", counter).val(); 
					} else if (counterDec && counter != settings.SliderMin) { 
						sliderInput.val(--counter).trigger("change");; 
						slider.slider( "option", "value", counter).val(); 
					} else { 
						clearInterval(idproc); 
					} 
				} 
				$(sliderInput).on('keyup change', function () { 
					window[settings.varName] = $(sliderInput).val(); 
					recount (); 
				}); 
			}); 
		} 
	}); 
})(jQuery); 
$('#children-slider').Counter({ 
	SliderMax: 100, 
	varName: "newVar" 
}); 
function recount () { 
	$('.var').html(newVar); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> 
<div id="children-slider"> 
  <div class="ui-widget-content"></div> 
  <button class="inc">Увеличить</button> 
  <input type="text" class="counter"> 
  <button class="dec">Уменьшить</button> 
</div> 
<div>та самая переменная: <span class="var"></span></div>