Question

我正在尝试学习如何从不同事件中调用变量。

我有2个输入，没有提交按钮。因此，我获得价值的方法是使用keyup事件。

我的代码：

function myPhone() {
  $("#phone").keyup(function() {
    var phone = $(this).val();
  });
  return phone;
}

function myEmail() {
  $("#email").keyup(function() {
    var email = $(this).val();
  });
  return email;
}

function myValidation() {
  var myPhone2 = myPhone();
  var myEmail2 = myEmail();

  alert(myPhone2 + " - " + myEmail2);
}

myValidation();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="phone" id="phone" placeholder="phone">
<input type="text" name="email" id="email" placeholder="email">

我的代码后面的说明：

首先，我创建一个名为myPhone()的函数，该函数将基于keyup保存用户已插入的值。我对电子邮件也是如此，并创建了一个函数myEmail()。

现在，我创建了另一个名为myValidation的函数，并尝试调用在myPhone()和myEmail()中获得的值，然后尝试在警报框中显示这些值。

但是，这对我不起作用。我可以看到它会在页面加载时发出警报，并显示未定义，这对我来说很有意义。

但是为什么不跟踪按键事件呢？为什么不调用这两个变量？我做错了吗？有人可以指导我解释一下吗？

Answer 1

即使事件尚未触发，您也要尝试警告这两个值。你应该

创建对电子邮件和电话变量的全局访问，也可以是对象
首先参加活动
在两个事件都触发后运行myValidation（），并添加一个标志来这样做；
警告全局范围内的值

按照您的代码，您可以：

//Create global variables
var phone, email;

//Create function to attach events
function setEvents(){
    //switched to change event
    $( "#phone" ).change(function() {
      phone = $(this).val();
      
      myValidation(); //call after
    });
    
    $( "#email" ).change(function() {
      email = $(this).val();
      
      myValidation(); //call after
    });
}

//Prepare myValidation() function to call after both events are triggered
function myValidation() {
    //Check if phone and email exists before alerting from the global scope
    if(phone && email) alert(phone + " - " + email);
}

setEvents(); //initiate function to attach events to element

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="phone" id="phone" placeholder="phone">
<input type="text" name="email" id="email" placeholder="email">

但是，就像其他人所说的那样，您可以直接获得$(element).val()而无需任何变量。但是我们遵循您的逻辑，我认为这对于直接解决该问题要好得多。

如何一起调用来自不同事件的变量？

1 个答案: