javascript / jquery 条件不起作用答案

【问题标题】：javascript / jquery conditions don't workjavascript / jquery 条件不起作用
【发布时间】：2014-11-29 11:39:22
【问题描述】：

请在 jsfiddle 上查看以下代码：

http://jsfiddle.net/j9b0uL6m/3/

var message1 = "E-mail has to contain @.";
var message2 = "You have to write your name.";
var message3 = "The password is 123456.";

var mail = $(this).parent().find(".mail").val();
var jmeno = $(this).parent().find(".jmeno").val();
var heslo = $(this).parent().find(".heslo").val();

var hint = "Those errors appeared:";

if (mail.indexOf("@") < 0) {
    hint += "\n\n" + message1;
}
if (jmeno === "") {
    hint += "\n\n" + message2;
}
if (heslo === "123456") {
    hint += "\n\n" + message3;
}
alert(hint);

问题是由于某种原因，只有当 div 包含带有类邮件的输入时才会显示警报。在其他情况下，它不起作用。你能帮帮我吗？

【问题讨论】：

您的控制台中有错误... jsfiddle.net/arunpjohny/j9b0uL6m/5 - 在第一组中有 .mail 元素，因此 mail 将是 undefined 所以调用 mail.indexOf("@") 将引发错误
如果没有类 mail 的元素，那么值 mail 将是未定义的，您将在 undefined 上调用 indexOf。在控制台中，您会看到类似 Cannot read property 'indexOf' of undefined 的内容
var mail = $(this).parent().find(".mail").val();
@ArunPJohny 我去过那里，不幸的是这个解决方案会导致错误的条件结果。如果没有类邮件，我不想得到与空邮件相同的结果。
@BořekVavřík 在这种情况下是jsfiddle.net/arunpjohny/j9b0uL6m/6

标签： jquery forms if-statement conditional-statements

【解决方案1】：

这是因为没有 mail 类的元素，mail 变量返回 undefined，所以你必须检查它是否在这种情况下不是 undefined对其进行操作：

 if (typeof mail != 'undefined' && mail.indexOf("@") < 0) {
        hint += "\n\n" + message1;
    }

如果你不检查它，它会在运行时抛出错误，因为它当前正在抛出：

TypeError: 邮件未定义

【讨论】：

【解决方案2】：

嗯，发生了一个错误，所以你的脚本不再执行了。

未捕获的类型错误：无法读取未定义的属性“indexOf”

在第 13 行 (if (mail.indexOf("@") < 0) {) 上，您正在检查“@”，而之前没有验证变量 mail。

mail 应该在第 7 行定义 (var mail = $(this).parent().find(".mail").val();)，但如果没有匹配的元素，mail 将变为 undefined。

只要写下你的条件

if ((undefined !== mail) && (YOURCONDITION) {
    // ...
}

【讨论】：

【解决方案3】：

Fiddle Demo

你 Uncaught TypeError: Cannot read property 'indexOf' of undefined 因为父元素中没有 mail 类的元素。

所以你可以使用

如果$.trim() 是undefined 或只有whitespace，则$.trim() 将返回空字符串。

if ($.trim(mail).indexOf("@") < 0) {\

Fiddle Demo

我修改了你的代码，让它变得更好

var message = []; //array for custom messages 
message['mail'] = "E-mail has to contain @.";
message['jmeno'] = "You have to write your name.";
message['heslo'] = "The password is 123456.";

$(".odkaz").click(function () {
    var hint = []; //hint empty array 
    $(this).parent().find('input').each(function () { //run through each input in the parent element 
        var cls = $(this).attr('class'), //get the class
            inp = $.trim(this.value), //get the value of input and trim it
            ret = Check(cls, inp); //get the return value from the function Check
        if (ret.length) hint.push(ret); //if returned value is not empty add to hint array
    });
    if (hint.length) { //if hind array has length then alert
        alert('Those errors appeared:\n' + hint.join('\n'));
    }
});

function Check(cls, inp) {
    if (cls == 'mail') {
        if (inp.indexOf("@") < 0) {
            return "\n\n" + message['mail'];
        }
    } else if (cls == 'jmeno') {
        if (inp === "") {
            return "\n\n" + message['jmeno'];
        }
    } else if (cls == 'heslo') {
        if (inp === "123456") {
            return "\n\n" + message['heslo'];
        }
    }
    return '';
}

【讨论】：