如何使用 .show() 和 .hide() 方法在 .click() 上显示错误日志？答案

【问题标题】：How to show an error log on .click() by using the .show() and .hide() methods?如何使用 .show() 和 .hide() 方法在 .click() 上显示错误日志？
【发布时间】：2019-05-20 20:57:59
【问题描述】：

我创建了一个页面，要求用户通过插入姓名、地址或电话号码来进行搜索查询，它们对应于三个导航选项卡（“姓名”、“地址”和“号码”），每个其中与输入文本表单和“搜索”按钮相关联。

我现在要做的是在用户点击“搜索”按钮而没有填写相应字段时显示错误日志。例如，如果用户在“姓名”选项卡上并单击“搜索”按钮，则会显示“请插入姓名”的错误消息。

我在 html 文件的 <p> 标记中包含错误消息，并且我想使用 JQuery .show() 和 .hide() 方法仅在以下两个条件同时发生时显示此类消息： 1) 该字段为空； 2) 按钮被点击。否则，消息将被隐藏。

这是我的 Javascript sn-p，它不适合我的目的：

    function validateName(){
        if($("#inlineFormInputName").val()==""){
            $("#searchNome").on('click', $("#errorLog").show());
        } 
    }
    function validateAddress(){
        if($("#inlineFormInputAddress").val()==""){
            $("#searchAddress").on('click', $("#errorLog").show());
        }
    }
    function validatePhone(){       
        if($("#inlineFormInputTelefono").val()==""){
            $("#searchPhone").on('click', $("#errorLog").show());
        }
    }
    function main(){
        $("#searchNome").on('click', validateName);
        $("#searchAddress").on('click', validateAddress);
        $("#searchPhone").on('click', validatePhone);
    }

    $(main());

#ID分别对应：

inlineFormInputName = 输入表单的 id - 第一个 Tab；
searchName = 按钮 ID - 第一个选项卡；
errorLog = 包含错误消息的 <p> 的 ID
inlineFormInputAddress = 2ndTab对应的输入表单的id；
searchAddress = 按钮 ID - 第二个选项卡；
inlineFormInputTelefono = 第三个Tab对应的输入表单的id；
searchPhone = 按钮 ID - 第三个选项卡。

我上传网页的画面：

如何使用 JQuery .show() 和 .hide() 方法仅在满足两个条件时显示错误消息？

【问题讨论】：

回调应该是函数定义/引用。 $(...).show() 不是函数定义。这是一个函数执行。
Why is the method executed immediately when I use setTimeout?的可能重复
副本用于超时，但超时和事件绑定都使用回调。那里和这里都存在同样的错误。

标签： javascript jquery hide show bootstrap-tabs

【解决方案1】：

如果对您的代码进行最小的更改...

使用的东西叫做'三元运算符'：

JsFiddle

function validateName(){
  ( $("#inlineFormInputName").val().length == 0 ) ? $("#errorLog").show() : $("#errorLog").hide();
}
function validateAddress(){
  ( $("#inlineFormInputAddress").val().length == 0 ) ? $("#errorLog").show() : $("#errorLog").hide();
}
function validatePhone(){
  ( $("#inlineFormInputTelefono").val().length == 0 ) ? $("#errorLog").show() : $("#errorLog").hide();
}

function main(){
  $("#searchNome").on('click', validateName);
  $("#searchAddress").on('click', validateAddress);
  $("#searchPhone").on('click', validatePhone);
}

(main)();

#errorLog {display: none; color: red; margin: 10px;}

<input id="inlineFormInputName">
<button id="searchNome">search</button>
  <br><br>
<input id="inlineFormInputAddress">
<button id="searchAddress">search</button>
  <br><br>
<input id="inlineFormInputTelefono">
<button id="searchPhone">search</button>

<div id="errorLog">bubu!</div>

附：小心你的 inlineFormInputTelefono 和 searchPhone... 可能会在某处搞砸...

【讨论】：