2 
My Name:<input class="clr" id="name" type="text" /><span class="clr" id="name_error">Name is required</span> <br /><br />

My Email Adress:<input class="clr" id="email" type="text" /><span class="clr" id="email_error">Email is required</span> <br /><br />

My Organisation Name:<input class="clr" id="organisation" type="text" /><span class="clr" id="org_error">Organisation is required</span> <br /><br />

我有 3 个输入字段。我span用来在提交空字段时显示错误消息。

我的问题是，如果name字段为空，我们应该得到"Name is required"错误，如果email字段为空，我们应该得到"email is required"错误等等。

为此，我正在编写以下代码。

if (name == "")
    $("#name_error").show();
else
    $("#name_error").hide();

if (email == "")
    $("#email_error").show();
else
    $("#email_error").hide();

if (organisation == "")
    $("#org_error").show();
else
    $("#org_error").hide();

有什么方法可以减少 if/else 语句？

4

2 回答 2

10

有效地使用 jQuery，您可以这样做。

$('input.clr').each(function(){
    if ($(this).val() == "")
        $(this).next('span.clr').show();
});

在此之前，我们需要以这种方式隐藏它们：

$('span.clr').hide();
于 2013-03-04T14:22:05.713 回答
3

你可以这样做：

   var obj = window; // or something else, depending on your scope
   ['name', 'email', 'organisation'].forEach(function(v) {
       var $e = $('#'+v+'_error');
       if (obj[v]=="") $e.show();
       else $e.hide();
   });

注意

  • 这假设更严格一些，用“组织”替换“组织”
  • 我试图模仿您的代码，但在根（即您填充变量的位置name）进行更改将允许更简单的代码
  • 如果您知道 DOM 不会改变并且错误跨度始终跟随输入，那么 Praveen 的答案可能更简单且适合
于 2013-03-04T14:21:45.040 回答