焦点输出在另一个输入中变为未定义。

Question

因此，我的任务即将完成，但我有一个问题，当我想得到我的两个输入的价值。当我填写电子邮件输入时，我得到了值，当移动到find_us输入时，电子邮件输入中的值变为空。

下面是我的层次结构html：

<div class="sm:mt-8">
        <div class="wa-button sm:mt-8">
          <label for="dialog-find">Email</label>
          <input type="text" name="email" placeholder="Type your email" value autocomplete="off" class="input-lg">
        </div>
        <div class="wa-button sm:mt-8">
          <label for="dialog-find">How Did You Find Us? (Google, Facebook, Referral, Events, etc)</label>
          <input type="text" name="find_us" placeholder="Type your find us" value autocomplete="off" class="input-lg">
        </div>
        <div class="post-script text-center">
          <a target="_blank" class="button" id="button-wa" rel="noopener noreferrer">Contact Us</a>
        </div>
</div>

我的javascript代码：

// wa-button
// greetings is my global variable
        $('.form-group.wa-button').find('input').each( function(){

          const thes = this;
          // check attribute by name
          const attrName = $(thes).attr('name');

          $(thes).focusout(function(){
            let a;
            let b;
            if(attrName === 'email' ){
              a = $(this).val();
            }

            if( $(this).val().length >= 5 && attrName === 'find_us'  ){
              b = $(this).val();
            }

            // i want get those values from email and find_us
            $('#button-wa').attr('href', `${greetings} my email is ${a} and find from ${b}`)
          })

          
        }); //end selector

我已经找了好几个小时的这个解决方案，但没能找到。请帮帮忙，告诉我哪里出了问题

谢谢

Answer 1

你让自己的生活变得不必要的复杂。相反，请尝试以下几点：

​

const greetings="hello";
$('.wa-button').on("input","input",function() {
  const a=$("input[name=email").val(), b=$("input[name=find_us").val();
  // I want get those values from email and find_us
  $('#button-wa').attr('href', `${greetings} my email is ${a} and I found you on ${b}`)
                 .each(function(){$(this).text('Contact us: '+$(this).attr("href"))});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sm:mt-8">
  <div class="wa-button sm:mt-8">
    <label for="dialog-find">Email</label>
    <input type="text" name="email" placeholder="Type your email" value autocomplete="off" class="input-lg">
  </div>
  <div class="wa-button sm:mt-8">
    <label for="dialog-find">How Did You Find Us? (Google, Facebook, Referral, Events, etc)</label>
    <input type="text" name="find_us" placeholder="Type your find us" value autocomplete="off" class="input-lg">
  </div>
  <div class="post-script text-center">
    <a target="_blank" class="button" id="button-wa" rel="noopener noreferrer">Contact Us</a>
  </div>
</div>

​

每次输入、更改或删除目标输入元素时，input事件都会触发。中使用了委托事件附件。

$('.wa-button').on("input","input",function()

在评论部分回答OP的问题：

在您的代码中，一个接一个地收集变量值不起作用，因为变量是在其本地上下文中声明的，并在事件函数完成执行后立即成为undefined。如果您想让变量“生存”，您需要在全局上下文(var 1,b;)中定义它们，但是即使这样，它们的内容也并不总是可靠的！当我们将事件处理程序附加到每个输入元素时，.each()只会被循环一次。单击本身只会导致一次读取一个值！您可以在下面的片段中试用。

​

// The following is an example of how NOT TO DO IT!
// ================================================
// It is a slight modification of OP's original code
//
const greetings ="Hello"; // global variable
var a,b;

$('.wa-button').find('input').each(function() {

  const thes = this;
  // check attribute by name
  const attrName = $(thes).attr('name');

  $(thes).focusout(function() {

    if (attrName === 'email') {
      a = $(this).val();
    }

    if ($(this).val().length >= 5 && attrName === 'find_us') {
      b = $(this).val();
    }

    // i want get those values from email and find_us
    $('#button-wa').attr('href', `${greetings} my email is ${a} and find from ${b}`)
  })


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sm:mt-8">
  <div class="wa-button sm:mt-8">
    <label for="dialog-find">Email</label>
    <input type="text" name="email" placeholder="Type your email" value autocomplete="off" class="input-lg">
  </div>
  <div class="wa-button sm:mt-8">
    <label for="dialog-find">How Did You Find Us? (Google, Facebook, Referral, Events, etc)</label>
    <input type="text" name="find_us" placeholder="Type your find us" value autocomplete="off" class="input-lg">
  </div>
  <div class="post-script text-center">
    <a target="_blank" class="button" id="button-wa" rel="noopener noreferrer">Contact Us</a>
  </div>
</div>

​