jQueryでユーザー入力を取得して同じものを使用する方法は？

Question

ユーザー入力を取得し、その入力を同じjQueryで処理したいとします。どうやってやるの？

例えば、私はjQueryでボールバウンスアニメーションを持っていますが、ボールが何回バウンスし、入力に基づいてボールをバウンスする必要があるかをユーザーに尋ねます。どうすればそれを達成できますか？私は値を取得する方法を知っていますが、値の処理方法はわかりません。私が使用した値の取得については

：ここ

$("button:#Get").click(function() { 

$('input:number').val(); 

}); 

機能を使用しようとしている例イムで、

$(function() { 
 
    
 
    var time = 500; 
 
    var bounces = 20; 
 
    var top_bounce = 10; 
 
    
 
    function bounceDown(){ 
 
     $("#ball").animate({left:10, top: bounces*10}, time, function(){ 
 
     bounceUp(); 
 
     }); 
 
    }; 
 
    
 
    
 
    
 
    function bounceUp() { 
 
     $("#ball").animate({top: top_bounce}, time); 
 
     top_bounce = top_bounce + 10; 
 
    }; 
 
    
 
    function shadowUp(){ 
 
     $("#shadow").animate({width: 100, height: 5, left: 10, top: bounces*15, opacity: 1}, time,  
 
    function(){ 
 
     shadowDown(); 
 
     }); 
 
    }; 
 
    
 
    function shadowDown() { 
 
     $("#shadow").animate({width: 0, height: 0, left: 15, top: bounces*15, opacity: 0}, time); 
 
    };  
 
    
 
    function finalDown(){ 
 
     $("#ball").animate({left:10, top: bounces*10}, time); 
 
    }; 
 
    
 
    function finalShadow(){ 
 
    $("#shadow").animate({width: 100, height: 5, left: 10, top: bounces*15, opacity: 1}, time);  
 
    }; 
 
    
 
    $('#Get').click(function() { 
 
     for (var i = 0; i < bounces; i++){ 
 
     setTimeout(function(){ 
 
      bounceDown(); 
 
      shadowUp();  
 
     }, time*2*i); 
 
     setTimeout(function(){ 
 
      finalDown(); 
 
      finalShadow(); 
 
     }, bounces*1000); 
 
     };    
 
    }); 
 
    
 
    
 
    
 
});

body { 
 
      background-color: black; 
 
      position: absolute; 
 
      width: 100%; 
 
      height: 100%; 
 
      overflow: hidden; 
 
     } 
 

 
     #container { 
 
      position: absolute; 
 
      left: 50%; 
 
      width: 500px; 
 
      height: 600px; 
 
     } 
 

 
     #ball { 
 
      width: 100px; 
 
      height: 100px; 
 
      position: absolute; 
 
      background-color: #e65454; 
 
      border-radius: 50%; 
 
     } 
 

 
#shadow { 
 
      position: absolute; 
 
      height: 5px; 
 
      width: 100px; 
 
    bottom:0; 
 
      background: radial-gradient(ellipse at center, rgba(91,91,91,1) 0%,rgba(142,142,142,0.84) 16%,rgba(227,228,229,0) 100%); /* W3C */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b5b5b', endColorstr='#00e3e4e5',GradientType=1); 
 
    opacity:0; 
 
    } 
 

 
div.inp{ 
 
    position:fixed; 
 
    bottom:35px; 
 
    left:30%; 
 
    width:100%; 
 
} 
 

 
input[type=number] { 
 
    width: 200px; 
 
    padding: 12px 10px; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    border: 2px solid #e65454; 
 
    border-radius: 8px; 
 
    outline:0; 
 
} 
 

 
button { 
 
    background-color: transparent; 
 
    color: white; 
 
    padding: 16px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    transition-duration: 0.4s; 
 
    cursor: pointer; 
 
    outline:0; 
 
    border: 2px solid #e65454; 
 
} 
 

 
button:hover { 
 
    background-color: #e65454; 
 
    color: black; 
 
    border: 2px solid transparent; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> 
 
<div class="inp"> 
 
<input type="number" value="How Many Bounces?"></input> 
 
<button id="Get">Set</button> 
 
<button id="Reset">Reset</button> 
 
</div> 
 
<div id="container"> 
 
     <div id="ball"></div> 
 
     <div id="shadow"></div> 
 
    </div>

今私は価値をユーザーに尋ねたいと値に基づいて、jqueryで "bounce"を更新する必要があります。

Answer 1

ではなく、無名関数の関数を定義します。

$(function() { 
    //function body 
} 

はあなたにもありませんを決定する変数を渡すことができ

function bounce(){ 
    //function body 
} 

のように定義します。あなたのケースでは、ボールのバウンスの "バウンス"。

function bounce(var bounces){ 
    //function body 
    //write everything that you have written in your function except var bounces 
    //as it is taken from input 
} 

次に、onClickメソッドで上記の関数を呼び出すことができます。また、@Francoによると、間違ったセレクタを使用しています。その次の

<input type="number" id="number" value="How Many Bounces?"></input> 

ような何かを書くことができ、最終的なjsの

$("#Get").click(function() { 
 
    bounces = $('#number').val(); 
 
    bounce(bounces); 
 
}); 
 

 
function bounce(bounces) { 
 
    
 
    var time = 500; 
 
    var top_bounce = 10; 
 
    
 
    
 
    
 
    function bounceDown(){ 
 
     $("#ball").animate({left:10, top: bounces*10}, time, function(){ 
 
     bounceUp(); 
 
     }); 
 
    }; 
 
    
 
    
 
    
 
    function bounceUp() { 
 
     $("#ball").animate({top: top_bounce}, time); 
 
     top_bounce = top_bounce + 10; 
 
    }; 
 
    
 
    function shadowUp(){ 
 
     $("#shadow").animate({width: 100, height: 5, left: 10, top: bounces*15, opacity: 1}, time,  
 
    function(){ 
 
     shadowDown(); 
 
     }); 
 
    }; 
 
    
 
    function shadowDown() { 
 
     $("#shadow").animate({width: 0, height: 0, left: 15, top: bounces*15, opacity: 0}, time); 
 
    };  
 
    
 
    function finalDown(){ 
 
     $("#ball").animate({left:10, top: bounces*10}, time); 
 
    }; 
 
    
 
    function finalShadow(){ 
 
    $("#shadow").animate({width: 100, height: 5, left: 10, top: bounces*15, opacity: 1}, time);  
 
    }; 
 
    
 
    
 
     for (var i = 0; i < bounces; i++){ 
 
     setTimeout(function(){ 
 
      bounceDown(); 
 
      shadowUp();  
 
     }, time*2*i); 
 
     setTimeout(function(){ 
 
      finalDown(); 
 
      finalShadow(); 
 
     }, bounces*1000); 
 
     };    
 
    
 
    
 
    
 
    
 
};

・ホープ、このことができますになります。

Answer 2

あなたは、あなたがする必要が無効なセレクタを使用している：

<input type="number" id="number" value="How Many Bounces?"></input> 

$("button#Get").on('click',function() { 
    var number = $('#number).val() 
    console.log(number); 
});