将 jQuery 转换为纯 javascript答案

【问题标题】：translate jQuery to pure javascript将 jQuery 转换为纯 javascript
【发布时间】：2011-11-28 09:08:55
【问题描述】：

我必须修复一些表单验证，但主机页面中没有包含 jQuery。我通常会做这样的事情......

if ($("#contactNameAdd").val() !== '' || $("#contactPhoneAdd").val() !== '') {
    $("#contactForm").show()
};

如何用普通的 js 重写？

【问题讨论】：

这几乎就像 jQuery 让人变得懒惰......这很简单......任何 JavaScript 开发人员都应该真正了解这种东西......

标签： javascript jquery language-translation

【解决方案1】：

var name = document.getElementById("contactNameAdd");
var phone = document.getElementById("contactPhoneAdd");
var form = document.getElementById("contactForm");

if(name.value != '' || phone.value != '') {
   form.style.display = "block";
}

【讨论】：

【解决方案2】：

if (document.getElementById('contactNameAdd').value !== '' || document.getElementById('contactPhoneAdd').value !== '') {
    document.getElementById('contactForm').style.display = 'block';
}

在纯 javascript 中，您使用 document.getElementById('id') 根据 id 属性获取 DOM 节点。您在 DOM Input 元素上使用 .value 来获取其值。并且您在任何 DOM 元素上使用 .style 来设置 css 属性。在这种情况下，“show”的意思是“display: block;”。

【讨论】：

【解决方案3】：

if (document.getElemenById('contactNameAdd').value != '' || document.getElementById('contactPhoneAdd').value != '') {
    document.getElementById('contactForm').style.display = 'block';
}

试试这个 - 检查 2 个值，然后更改 'contactForm' 的 style.display 属性

【讨论】：

【解决方案4】：

这应该可以解决问题。

var contactNameAdd = document.getElementById("contactNameAdd");
var contactPhoneAdd = document.getElementById("contactPhoneAdd");

if((contactNameAdd !== null && contactNameAdd.value !== '') || (contactPhoneAdd !== null && contactPhoneAdd.value !== ''))
{
    document.getElementById("contactForm").style.display = 'block';
}

【讨论】：

getElementById
感谢 ManselUK，没有注意到我在顶部的错字。
我不想编辑你的帖子 - 觉得有点厚脸皮！

【解决方案5】：

var contactName = document.getElementById('contactNameAdd');
var contactPhone = document.getElementById('contactPhoneAdd');
if(contactName.value !== '' || contactPhone.value !== '') {
  // Different as JQuery, there will be no animation.
  // I assume you use 'display:none' to hide the form.
  var form = document.getElementById('contactForm');
  form.style.display = 'block';
}

【讨论】：