0

我正在尝试使用 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>

4

2 回答 2

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>

于 2017-06-28T12:19:59.977 回答
1

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

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

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

问候。

于 2017-06-28T12:20:16.420 回答