Javascript jQuery如果输入字段有值，则添加类

我有一个动态表单，每次焦点在某个特定字段上时，标签文本都会移动到该字段上方，如果输入了值，标签文本就会停留在该字段上。这适用于名称和消息字段。我的问题是电话或电子邮件的联系方式。该字段基于所选的首选联系方式显示。但是当输入一个值时，在该字段失去焦点后，文本返回并与用户输入的内容重叠。在选择元素方面，我尝试了很多不同的方法，但无法让这些领域合作。我还没有找到解决这个具体问题的方法。下面是一张表格：和下面的代码片段

$（'input'）.blur（函数（事件）{
var inputValue=此.value；
如果（输入值）{
this.classList.add（'value-exists'）；
}否则{
this.classList.remove（'value-exists'）；
}
});
$（'input:radio[name=contact]'）。在（'click'，函数（e）{
var值=$（'input:radio[name=contact]：选中'）.val（）；
如果（值=='Phone'）{
$（'#contact method'）.html（'Phone'）.show（'600'）；
}else if（值=='Email'）{
$（'#联系方式'）.html（'Email'）.show（'600'）；
}
});
表单{
字体系列：“PT Sans”，无衬线；
}
标签{
显示：块；
填充顶部：10px；
}
标签。标签文本{
光标：文本；
-moz变换：translateY（-22px）；
-ms变换：translateY（-22px）；
-webkit转换：translateY（-22px）；
转换：translateY（-22px）；
过渡：均为0.3秒；
}
标签输入{
背景色：透明；
边界：0；
边框底部：实心#777 2px；
过渡：全部为0.03s；
}
标签输入：焦点+。标签文本{
颜色：“黑色”；
文本转换：大写；
转换：translateY（-55px）；
}
标签输入。值存在+。标签文本{
颜色：“黑色”；
文本转换：大写；
转换：translateY（-55px）；
}

名称


消息


您希望如何联系

电子邮件
电话






提交
这个想法。由于动态添加了元素，因此需要在创建元素后向其添加模糊事件。将模糊事件包装到函数中，并在页面加载时以及每次更新输入元素后调用它


函数initInputBlur（）{
$（'input'）。在（'blur'，函数（事件）上{
var inputValue=此.value；
如果（输入值）{
this.classList.add（'value-exists'）；
}否则{
this.classList.remove（'value-exists'）；
}
});
}
$（'input:radio[name=contact]'）。在（'click'，函数（e）{
var值=$（'input:radio[name=contact]：选中'）.val（）；
如果（值=='Phone'）{
$（'#contact method'）.html（'Phone'）.show（'600'）；
}else if（值=='Email'）{
$（'#联系方式'）.html（'Email'）.show（'600'）；
}
initInputBlur（）；
});
//初始化
initInputBlur（）
表单{
字体系列：“PT Sans”，无衬线；
}
标签{
显示：块；
填充顶部：10px；
}
标签。标签文本{
光标：文本；
-moz变换：translateY（-22px）；
-ms变换：translateY（-22px）；
-webkit转换：translateY（-22px）；
转换：translateY（-22px）；
过渡：均为0.3秒；
}
标签输入{
背景色：透明；
边界：0；
边框底部：实心#777 2px；
过渡：全部为0.03s；
}
标签输入：焦点+。标签文本{
颜色：“黑色”；
文本转换：大写；
转换：translateY（-55px）；
}
标签输入。值存在+。标签文本{
颜色：“黑色”；
文本转换：大写；
转换：translateY（-55px）；
}

名称


消息


您希望如何联系

电子邮件
电话






提交
既然您更改了
$（“#联系方式”）.html
每次，请使用

$(document).on('blur', 'input', function(event) {

而不是

$('input').blur(function(event) {

您可以在隐藏的div中添加电话和电子邮件元素，并相应地显示它们：

<p>How would you prefer to be contacted?</p>
<label>
                            <input class="contact" type="radio"  name="contact" value="Email" /> Email
                            <input class="contact" type="radio" name="contact" value="Phone" /> Phone
                        </label>

<br />
<br />
<label>
<div id="phone" class="hidden">
<input type="phone" name="phone" /><div class="label-text">Phone</div>
</div>
</label>
<label>
<div id="email" class="hidden">
<input type="email" name="email" /><div class="label-text">Email</div>
</div>
</label>

这是一个设计问题，而不是编程问题。如果“电子邮件”和“电话”输入要在页面上共享同一个不动产，那么你需要想出一个设计解决方案，不允许标签与输入重叠。工作非常完美，这接近于我尝试过但无法正确实现的东西（仍在学习！）。再次感谢@leslieb很乐意帮忙
$('input:radio[name=contact]').on('click', function(e) {
  var value = $('input:radio[name=contact]:checked').val();
  if (value === 'Phone') {
    $('#phone').removeClass("hidden");
    $('#email').addClass("hidden");
  } else if (value === 'Email') {
    $('#phone').addClass("hidden");
    $('#email').removeClass("hidden");
  }
});