jQueryUI 微调器不工作

Question

我正在尝试使用 jQueryUI 微调器更改 div 的边框宽度。但这对我不起作用。我有一个名为 ".active" 的 div 和一个名为 "#a2" 的输入。当用户更改输入的值时，我希望将输入的值作为边框宽度的值。这是我的代码：-

$('#a2').spinner(function(){
spin: function(event, ui){
  var getVal = $('#a2').val();
  $('.active').css({borderWidth: getVal});
}
});

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


 <input class="tooltiptext" type="number" id="a2" value="0">


<div class="active" style="height: 100px; width:100px; border: 40px solid green"></div>

Answer 1

首先你必须在 jquery ui 之前设置 jquery js，现在微调器实例化中还有函数参数，你应该传递一个对象 { ... }您在那里初始化所有微调器变量和事件处理程序....

请参阅下面的工作片段：

$(function() {
  $('#a2').spinner({
   spin: function( event, ui ) {
      var getVal = $('#a2').val();
      console.log(getVal);
      $('.active').css({
        borderWidth: getVal
      });
   }
  });
});

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>



<input class="tooltiptext" type="number" id="a2" value="0">


<div class="active" style="height: 100px; width:100px; border: 40px solid green"></div>

Answer 2

您不必将函数放在 spinner() 的参数中，而是对象配置。

$( "#a2" ).spinner({
  spin: function( event, ui ) {
    var getVal = $('#a2').val();
    $('.active').css({borderWidth: getVal});
  }
});

这里是例子fiddle https://jsfiddle.net/au3p693t/

问候。

jQueryUI 微调器不工作

jQueryUI spinner is not working

javascript

jquery

jquery-ui

input

jquery-ui-spinner