多个If语句相互取消？ (Javascript)答案

【问题标题】：Multiple If Statements Cancelling each-other out? (Javascript)多个If语句相互取消？ (Javascript)
【发布时间】：2016-02-10 21:06:01
【问题描述】：

我在处理需要多行“if”逻辑来处理功能的代码时遇到了一些问题。

其中两个 if 语句做同样的事情，在我看来它们是如何相互抵消的。

function visibleCheck() {

    var target = document.getElementById('contentType').val();

    if (target != "BYOC - Document to Exam") {
        document.getElementById('VideoMinutes').style.display = 'block';
    }
    else document.getElementById('VideoMinutes').style.display = 'none';

    if ((target != "Custom Production - Avatar") {
        document.getElementById('Questions').style.display = 'block';
    }
    else document.getElementById('Questions').style.display = 'none';

    if ((target != "Custom Production - Video") {
        document.getElementById('Questions').style.display = 'block';
    }
    else document.getElementById('Questions').style.display = 'none';

}

第一个 if 语句运行良好。第二个似乎根本没有运行。第三个运行良好。

如果我重新订购第二个和第三个交换位置，新的第二个将不起作用。

如果我使用或运算符“||”并结合它根本不起作用的语句。

无论 if 语句的条件如何，第三条语句始终有效。

如果我将第二个和第三个都设置为 if 或语句，那么它们都不起作用。

有什么想法吗？

如果有什么不同的话，我会在 salesforce 的 visualforce 页面上使用它。

【问题讨论】：

您是否考虑过使用else ifstatements？
@BrettDeWoody 我没有考虑过，因为已经有三个，而且可能还有更多。你认为它会有所作为吗？
和/或switch() (MDN docs) 声明。
个人建议：将您的 else 箱子包裹在 {} 中，就像您在 if 箱子中一样。使事情更清洁并捕获某些错误。另一件事是第二个“似乎根本没有运行”是什么意思？
对调试控制台的基本了解会在您的代码中显示几个明显的错误。在将代码带到这里之前，您需要了解调试的第一个基本步骤。一方面，DOM 元素上没有 .val() 方法（这是一个 jQuery 方法，而不是 DOM 方法），并且括号不匹配。这两个错误都会显示在调试控制台中。

标签： javascript jquery if-statement salesforce

【解决方案1】：

首先，请注意 DOMElements 没有 val() 方法，这仅适用于 jQuery 对象。您应该使用value 属性。

其次，逻辑存在缺陷，因为 Questions 元素的执行可能会遇到多个相互矛盾的条件。试试这个：

function visibleCheck() {
    var target = document.getElementById('contentType').value;

    if (target != "BYOC - Document to Exam") {
        document.getElementById('VideoMinutes').style.display = 'block';
    }
    else {
        document.getElementById('VideoMinutes').style.display = 'none';
    }

    if (target != "Custom Production - Avatar" && target != "Custom Production - Video") {
        document.getElementById('Questions').style.display = 'block';
    }
    else {
        document.getElementById('Questions').style.display = 'none';
    }
}

正如您使用 jQuery 标记的，这里是一个简化的 jQuery 版本：

function visibleCheck() {
    var target = $('#contentType').val();
    $('#VideoMinutes').toggle(target != 'BYOC - Document to Exam');
    $('#Questions').toggle(target != "Custom Production - Avatar" && target != "Custom Production - Video");
}

【讨论】：

我实际上复制了旧版本的代码，但您的简化版本效果很好，谢谢！