Question

我想获得用户输入并在同一个jQuery中处理该输入。我怎么能这样做？

比如说，我在jQuery中有一个球弹跳动画，我想问用户该球有多少次反弹并根据他/她的输入，球必须反弹。我怎么能做到这一点？我知道如何获得价值，但我不知道如何处理价值。

为了获得我使用的价值：

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

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

});

这是一个尝试使用该功能的例子，

＆＃13;

$(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);
      };               
    });
    
    
    
});

＆＃13;

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

＆＃13;

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

＆＃13;

现在我想要询问用户的价值并根据价值，＆＃34;反弹＆＃34;应该在jquery中更新。

Answer 1

您正在使用无效的选择器：

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

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

Answer 2

定义函数而不是匿名函数。

$(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);
      };               
    
    
    
    
};

希望这有助于。

如何在jQuery中获取用户输入并使用它？

2 个答案: