Is it possible to implement a dynamic variable on jquery like an angular js? Those. when this variable changes, it is immediately displayed, for example, I have some plugin, where this variable changes, how can I get it out of the plugin, provided it has changed? Plugin itself: It changes the variable that is specified in the plugin initialization parameter - varName. The idea is that a person can simply create variables, and then add them up / multiply and so on with a simple arithmetic expression.

(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>

  • would need more data for the plugin and what you see .... in theory you can open the pattern "observer" and make it) - Alexey Shimansky
  • See this question. stackoverflow.com/questions/1759987/… - Nick
  • @ Alexey Shimansky added a detailed explanation and the plugin itself - Vyacheslav Yashnikov

1 answer 1

Not the most logical solution, but still, use trigger change on input change where the variable is entered:

 $(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>