Question

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

$('#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，在spinner实例中现在还有函数param，你应该传递一个对象{ ... }，你在那里初始化所有的微调器变量和事件处理程序....

见下面的工作片段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您不必将函数放在spinner（）中的参数中，而是将其放入对象配置。

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

这是示例小提琴 https://jsfiddle.net/au3p693t/

问候。

jQueryUI微调器无法正常工作

2 个答案: