jQueryUIスピナーが動作していません

Question

jQueryUIスピナーでdivの境界線の幅を変更しようとしています。しかし、それは私のために働いていません。私は"アクティブ"と呼ばれ、idは"＃a2"と呼ばれる入力を持っています。ユーザーが入力の値を変更すると、入力の値が境界幅の値になります。ここに私のコードは次のとおりです。 - 、また、スピナーのインスタンス内の関数のparamは今

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

あなたはスピナー（）に引数で関数を配置する必要がなく、むしろ オブジェクトの設定はありません。ここ

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

は、例えば、フィドルは https://jsfiddle.net/au3p693t/

よろしくです。

Answer 2

まずあなたはjQueryのUIの前にjqueryのjsファイルを設定する必要があり、あなたが初期化オブジェクト{ ... }を渡す必要がありますそこにすべてのスピナーVARSとイベントハンドラ....

が働いスニペット以下を参照してください。

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