Question

我正在自学jQuery。我的第一个项目是构建一个简单的拨号盘。在仔细阅读了文档之后，我似乎找不到想要的东西，因此我转向这里。我希望能够创建一个整数字符串，该整数字符串将成为用户按下带有数字值的按钮时要拨打的电话号码。我在网上找到了许多示例，但我想了解其逻辑。到目前为止，我的代码仅在电话屏幕上显示一个值，而它甚至不是正确的数字。我错过了重点。我该如何工作？

这是我到目前为止所拥有的：

$(document).ready(function(){
    $('.numpad').click(function(){
    
        var number = $('.numpad').val();
    
    $('#phoneScreen').val(number);
    
    });
    
    
});

.numpad{
    padding:1%;
    width:100%;
}
.hidpad{
   visibility:hidden;
}
.btn-call{
    margin-top:3%;
   margin-bottom:5%;
}

 <!-- bootstrap css stylesheets -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- bootstrap javascript, jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="table-bordered text-center col-md-4">
    <br>
    

  <div id="mydivheader"></h1></div>
<div class=""><input class="table-bordered form-control" type="text" id="phoneScreen" /></div><br>
<div class="row table-striped">
<div class="col-md-4">
<button class="numpad btn btn-default" value="1"><span class="txt"> 1 </span><p class="hidpad">111</p></button>
</div>
<div class="col-md-4">
<button class="numpad btn btn-default" value="2"><span class="txt"> 2 </span><p>ABC</p></button>
</div>
<div class="col-md-4">
<button class="numpad btn btn-default" value="3"><span class="txt"> 3 </span><p>DEF</p></button>
</div>

</div>
<div class="row">
<div class="col-md-4">
<button class="numpad btn btn-default" value="4"><span class="txt"> 4 </span><p>GHI</p></button>
</div>
<div class="col-md-4">
<button class="numpad btn btn-default" value="5"><span class="txt"> 5 </span><p>JKL</p></button>
</div>
<div class="col-md-4">
<button class="numpad btn btn-default" value="6"><span class="txt"> 6 </span><p>MNO</p></button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button class="numpad btn btn-default" value="7"><span class="txt"> 7 </span><p>PQRS</p></button>
</div>
<div class="col-md-4">
<button class="numpad btn btn-default" value="8"><span class="txt"> 8 </span><p>TUV</p></button>
</div>
<div class="col-md-4">
<button class="numpad btn btn-default" value="9"><span class="txt"> 9 </span><p>WXYZ</p></button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button class="numpad btn btn-default" value="*"><span class="txt"> * </span><p class="hidpad">***</p></button>
</div>
<div class="col-md-4">
<button class="numpad btn btn-default" value="+"><span class="txt"> 0 </span><p>+</p></button>
</div>
<div class="col-md-4">
<button class="numpad btn btn-default" value="#"><span class="txt"> # </span><p class="hidpad">###</p></button>
</div>
</div>

<div class="row btn-call">
<div class="col-md-6">
<button id="makeCall" class="btn btn-success btn-dial"><img src="https://img.icons8.com/ios/25/000000/ringer-volume.png"> Start Call</button>
</div>
<div class="col-md-6">
<button  id="endCall" class="btn btn-danger btn-dial"><img src="https://img.icons8.com/ios/25/000000/end-call.png"> End Call</button>
</div>
</div>

</div>

我的codepen：https://codepen.io/anon/pen/dwVzWo

Answer 1

更改您的JQuery代码：

$(document).ready(function(){


 $('.numpad').click(function(){
        //Use this to get the value of the button which triggered the event
        //$(this) refers to the button which triggered the event in this context
        //You were using class numpad which returned the value of the first element in
        //the collection, that's why you kept getting a value of 1
        var number = $(this).val();

    //On this line you want to append the newly pressed key to the existing value
    //Of the element with id phoneScreen
    $('#phoneScreen').val($('#phoneScreen').val() + number);


});

Answer 2

在回调函数中使用$(this)来引用要单击的元素，而不是$（'。numpad'）。使用您的代码，jQuery获得第一个$('.numpad')元素的值并更新$('#phoneScreen')值。（这就是为什么只有数字1出现的原因）

当前，您的代码正在覆盖电话屏幕中的显示。我们要连接这个数字，而不是相加。为此，我们获取phoneScreen值并与单击的数字连接。有时，当我们想将两个数字连接在一起时，javascript会计算它们，因此我们使用.toString()方法。

$(document).ready(function(){
    $('.numpad').click(function(){

        var number = $(this).val();
        var phoneScreen =  $('#phoneScreen').val();

        $('#phoneScreen').val( (phoneScreen + number).toString() );

    }); 
});

查看下面的代码。做同样的事情，不需要导入库。

window.onload = function(){
  var numpads = document.querySelectorAll('.numpad');
  var phoneScreen = document.getElementById('phoneScreen');

  numpads.forEach( function(elem, index) {
     elem.addEventListener('click', function( evt ){
       var value = elem.value;
       phoneScreen.value += value;

     });
  });
}

如何使用jQuery创建整数字符串？

2 个答案: