在創建文檔之後重新創建js對象

-2

我正在使用updown number plugin 現在我想要在初始化對象後更改min和max。在創建文檔之後重新創建js對象

我希望用戶可以選擇他們選擇這個對象必須改變，但不工作

請幫幫我，

我爲我的軟弱Englthish

抱歉，這是我的代碼：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="http://nakupanda.github.io/number-updown/assets/number-updown/js/updown.js"></script> 
 
<script src="http://nakupanda.github.io/number-updown/assets/prettify/run_prettify.js"></script> 
 
<script src="http://nakupanda.github.io/number-updown/assets/bootstrap/js/bootstrap.min.js"></script> 
 
<link href="http://nakupanda.github.io/number-updown/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<meta charset="utf-8" /> 
 
<title>jQuery number-updown plugin examples</title> 
 
<style> 
 
    .demo-input { 
 
     width: 200px; 
 
    } 
 
</style> 
 
</head> 
 
<body style="padding-bottom: 100px;"> 
 
<div class="container"> 
 
    <button id="new-min-max">new min/max</button> 
 
    <h3>Controlled by buttons</h3> 
 

 
    <div class="demo"> 
 
     <div style="display: inline-block"><input type="text" class="form-control demo-input" id="controlledByButtons" value="0" /></div> 
 
     <div style="display: inline-block"> 
 
      <button class="btn btn-default" id="btnIncrease">+</button> 
 
      <button class="btn btn-default" id="btnDecrease">-</button> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
var $controlledByButtons = $('#controlledByButtons'); 
 
     $controlledByButtons.updown({ 
 
      step: 10, 
 
      shiftStep: 100 
 
     }); 
 
     var $updown = $controlledByButtons.data('updown'); 
 
     $('#btnIncrease').click(function(event){ 
 
      $updown.increase(event); 
 
      $updown.triggerEvents(); 
 
     }); 
 
     $('#btnDecrease').click(function(event){ 
 
      $updown.decrease(event); 
 
      $updown.triggerEvents(); 
 
     }); 
 
     $("#new-min-max").click(function(){ 
 
     //what comes here to change min and max again???? 
 
     }); 
 
</script> 
 
</body> 
 
</html>

來源

2017-07-18 Hamid Reza Yazdani

你可以發佈你的代碼嗎？ – liontass

@liontass我寫了我的代碼。請現在幫助我 –

哈米德我做t中的小變化他updown.js代碼，如果你按照我的指示，你可以設置defaultStep屬性中的步驟新值，如我所示。首先複製並添加我給你的updown插件代碼，並將其添加到head部分腳本中而不是cdn中。 updown.js：

/* ================================================ 
 
* Increase/decrease number for Input field by using arrow up/down keys. 
 
* 
 
* Useful when it's not possible to use HTML5's Number. 
 
* 
 
* No modern version of jQuery UI is required. 
 
* 
 
* Licensed under The MIT License. 
 
* ================================================ */ 
 

 
!function($) { 
 
    "use strict"; 
 
    
 
    var Updown = function($element, options) { 
 
     this.defaultOptions = { 
 
      step: 1, 
 
      shiftStep: 6, 
 
      circle: false, 
 
      min: null, 
 
      max: null 
 
     }; 
 
     this.init($element, options); 
 
    }; 
 

 
    Updown.prototype = { 
 
     constructor: Updown, 
 
     init: function($element, options) { 
 
      this.$element = $element;    
 
      this.options = $.extend(true, this.defaultOptions, options); 
 
      //console.log(this); 
 
      this.watchKeyboard(); 
 
      this.watchMouse(); 
 
      
 
      return this; 
 
     }, 
 
     watchKeyboard: function() { 
 
      var self = this; 
 
      this.$element.bind('keydown', function(event) { 
 
       var code = (event.keyCode ? event.keyCode : event.which); 
 
       if (self.keysMap[code] && !isNaN(self.getInputVal())) { 
 
        self.keysMap[code].call(self, event); 
 
        event.preventDefault(); 
 
       } 
 
      }); 
 

 
      return this; 
 
     }, 
 
     watchMouse: function() { 
 
      var self = this; 
 
      this.$element.bind('mousewheel DOMMouseScroll', function(event) { 
 
       var e = window.event || event; // old IE support 
 
       var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail || -e.originalEvent.detail))); 
 
       if (delta < 0) { 
 
        self.keysMap[40].call(self, event); 
 
       } else { 
 
        self.keysMap[38].call(self, event); 
 
       } 
 
       event.preventDefault(); 
 
      }); 
 

 
      return this; 
 
     }, 
 
     keysMap: { 
 
      38: function(event) { 
 
       this.increase(event); 
 
       this.triggerEvents(); 
 

 
       return this; 
 
      }, 
 
      40: function(event) { 
 
       this.decrease(event); 
 
       this.triggerEvents(); 
 

 
       return this; 
 
      } 
 
     }, 
 
     getNumberVal: function(val) { 
 
      if (!val) { 
 
       return 0; 
 
      } 
 

 
      return Number(val); 
 
     }, 
 
     getInputVal: function() { 
 
      return this.getNumberVal(this.$element.val()); 
 
     }, 
 
     setInputVal: function(val) { 
 
      this.$element.val(val); 
 

 
      return this; 
 
     }, 
 
     increase: function(event) { 
 
      var step = event.shiftKey ? this.options.shiftStep : this.options.step; 
 
      var val = this.getInputVal() + step; 
 
      if (this.options.max !== null && val > this.options.max) { 
 
       val = this.options.circle ? this.options.min : this.options.max; 
 
      } 
 
      this.setInputVal(val); 
 

 
      return this; 
 
     }, 
 
     decrease: function(event) { 
 
      var step = event.shiftKey ? this.options.shiftStep : this.options.step; 
 
      var val = this.getInputVal() - step; 
 
      if (this.options.min !== null && val < this.options.min) { 
 
       val = this.options.circle ? this.options.max : this.options.min; 
 
      } 
 
      this.setInputVal(val); 
 

 
      return this; 
 
     }, 
 
     triggerEvents: function() { 
 
      this.$element.trigger('keyup'); 
 

 
      return this; 
 
     } 
 
    }; 
 

 
    $.fn.updown = function(options) { 
 
     return this.each(function(index) { 
 
      var $this = $(this); 
 
      debugger; 
 
      var data = $this.data('updown'); 
 
      if (!data) { 
 
       $this.data('updown', new Updown($(this), options)); 
 
      }else{     
 
       data.options.step=options.defaultStep; 
 
      }    
 
     }); 
 
    }; 
 
    
 
}(window.jQuery);

然後當你看到運行的頁面。唯一的區別是，在單擊$（「＃new-min-max」）元素時，必須使用所需的新值步進器（在本例中爲var a）設置新屬性名稱defaultStep：

var $controlledByButtons = $('#controlledByButtons'); 
 
    
 
     $controlledByButtons.updown({ 
 
      step: 10, 
 
      shiftStep: 100 
 
     }); 
 
     var $updown = $controlledByButtons.data('updown'); 
 
     $('#btnIncrease').click(function(event){ 
 
      $updown.increase(event); 
 
      $updown.triggerEvents(); 
 
     }); 
 
     $('#btnDecrease').click(function(event){ 
 
      $updown.decrease(event); 
 
      $updown.triggerEvents(); 
 
     }); 
 
     
 
     
 
    
 
     $("#new-min-max").click(function(){ 
 
//Here yoy can set your new steper value;    
 
      var a=50;   
 
      $controlledByButtons.updown({ 
 
      defaultStep:a 
 
     }); 
 
      
 
      
 
     });

.demo-input { 
 
     width: 200px; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="js/updown.js"></script> 
 
<script src="http://nakupanda.github.io/number-updown/assets/prettify/run_prettify.js"></script> 
 
<script src="http://nakupanda.github.io/number-updown/assets/bootstrap/js/bootstrap.min.js"></script> 
 
<link href="http://nakupanda.github.io/number-updown/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<meta charset="utf-8" /> 
 
<title>jQuery number-updown plugin examples</title> 
 

 
</head> 
 
<body style="padding-bottom: 100px;"> 
 
<div class="container"> 
 
    <button id="new-min-max" >new min/max</button> 
 
    <h3>Controlled by buttons</h3> 
 

 
    <div class="demo"> 
 
     <div style="display: inline-block"><input type="text" class="form-control demo-input" id="controlledByButtons" value="0" /></div> 
 
     <div style="display: inline-block"> 
 
      <button class="btn btn-default" id="btnIncrease">+</button> 
 
      <button class="btn btn-default" id="btnDecrease">-</button> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2017-07-19 21:10:19 liontass

在創建文檔之後重新創建js對象

回答

相關問題