减少多个 if else 语句

Question

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 语句？

Answer 1

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

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

在此之前，我们需要这样隐藏它们：

$('span.clr').hide();

Answer 2

你可以这样做：

   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();
   });

注意

• 这假设更加严格，将“org”替换为“organisation”
• 我试图模仿您的代码，但更改根（即填充变量的位置，如 name）将允许更简单的代码
• 如果您知道 DOM 不会改变并且错误跨度始终跟随输入，那么 Praveen 的答案可能更简单且适合