Javascript：如何简化JS样式列表？

我想写一个简单的表格。表单基本上需要在单击submit按钮时验证2个必填下拉字段，如果未选择任何内容，则突出显示标签

我的自动取款机工作得很好，但它又长又粗，我必须问，有没有一种简单的方法

function submitCheck() {
    if (formTest.connection.value.length==0 && formTest.location.value.length==0) {
        document.getElementById("connection").style.color = "#961515";
        document.getElementById("location").style.color = "#961515";
        document.getElementById("connection").style.fontStyle = "italic";
        document.getElementById("location").style.fontStyle = "italic";
    } else if (formTest.connection.value.length==0 && formTest.location.value.length!=0) {
        document.getElementById("connection").style.color = "#961515";
        document.getElementById("connection").style.fontStyle = "italic";
        document.getElementById("location").style.color = "#000000";
        document.getElementById("location").style.fontStyle = "normal";
    } else if (formTest.location.value.length==0 && !formTest.connection.value.length!=0) {
        document.getElementById("location").style.color = "#961515";
        document.getElementById("location").style.fontStyle = "italic";
        document.getElementById("connection").style.color = "#000000";
        document.getElementById("connection").style.fontStyle = "normal";
    } else {
        document.getElementById("connection").style.color = "#000000";
        document.getElementById("location").style.color = "#000000";
        document.getElementById("location").style.fontStyle = "normal";
        document.getElementById("connection").style.fontStyle = "normal";
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

---

只需从四行重复的代码中创建一个函数：

function setStyles(color1, color2, style1, style2) {
    document.getElementById("connection").style.color = color1;
    document.getElementById("location").style.color = color2;
    document.getElementById("connection").style.fontStyle = style1;
    document.getElementById("location").style.fontStyle = style2;
}

您可以用简单的函数调用替换每个块，例如：

setStyles("#961515", "#000000", "italic", "normal");

更新后的代码看起来像：

function submitCheck() {
    if (formTest.connection.value.length==0 && formTest.location.value.length==0) {
        setStyles("#961515", "#961515", "italic", "italic");
    } else if (formTest.connection.value.length==0 && formTest.location.value.length!=0) {
        setStyles(...);
    } else {
        ...
    }
}

---

只需从四行重复的代码中创建一个函数：

function setStyles(color1, color2, style1, style2) {
    document.getElementById("connection").style.color = color1;
    document.getElementById("location").style.color = color2;
    document.getElementById("connection").style.fontStyle = style1;
    document.getElementById("location").style.fontStyle = style2;
}

您可以用简单的函数调用替换每个块，例如：

setStyles("#961515", "#000000", "italic", "normal");

更新后的代码看起来像：

function submitCheck() {
    if (formTest.connection.value.length==0 && formTest.location.value.length==0) {
        setStyles("#961515", "#961515", "italic", "italic");
    } else if (formTest.connection.value.length==0 && formTest.location.value.length!=0) {
        setStyles(...);
    } else {
        ...
    }
}

---

假设元素的类型为

input

在CSS中：

在JS中：

function submitCheck() {
    var hasConnection = formTest.connection.value.length != 0; 
    var hasLocation = formTest.location.value.length != 0;

    document.getElementById("connection").className = hasConnection ? "" : "invalid";
    document.getElementById("location").className = hasLocation ? "" : "invalid";

    if(hasConnection && hasLocation){
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

注意，我使用的是一种设置类名的基本方法，要获得更完整的解决方案，请使用此方法或使用类似jquery的框架

---

我认为这是一种更好的方法，因为它将样式与javascript分离。

假设元素的类型为

input

在CSS中：

在JS中：

function submitCheck() {
    var hasConnection = formTest.connection.value.length != 0; 
    var hasLocation = formTest.location.value.length != 0;

    document.getElementById("connection").className = hasConnection ? "" : "invalid";
    document.getElementById("location").className = hasLocation ? "" : "invalid";

    if(hasConnection && hasLocation){
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

注意，我使用的是一种设置类名的基本方法，要获得更完整的解决方案，请使用此方法或使用类似jquery的框架

---

我认为这是一种更好的方法，因为它将样式与javascript分离。

您可以创建一个函数来设置适当的样式，而不是将所有内容重复四次。此外，您还可以将一直测试的值存储在变量中：

function setStyles(connectionColor, connectionStyle,
                   locationColor, locationStyle) {
    document.getElementById("connection").style.color = connectionColor;
    document.getElementById("location").style.color = locationColor;
    document.getElementById("connection").style.fontStyle = connectionStyle;
    document.getElementById("location").style.fontStyle = locationStyle;
}

function submitCheck() {
    var connectionVal = formTest.connection.value,
        locationVal = formTest.location.value;

    if (connectionVal.length==0 && locationVal.length==0) {
        setStyle("#961515", "italic", "#961515", "italic");
    } else if (connectionVal.length==0 && locationVal.length!=0) {
        setStyle("#961515", "italic", "#000000", "normal");
    } else if (locationVal.length==0 && !connectionVal.length!=0) {
        setStyle("#000000", "normal", "#961515", "italic");
    } else {
        setStyle("#000000", "normal", "#000000", "normal");
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

这丝毫不会改变你的逻辑，只会让它更简短，更容易阅读。但是，如果单独测试连接字段和位置字段，也可以稍微优化逻辑

---

与其单独设置颜色和斜体/普通，不如在CSS样式表中定义一些类，并根据需要添加/删除这些类。它不仅使您的JS更简单、更易于阅读，还避免了在JS中嵌入特定的颜色。

您可以创建一个函数来设置适当的样式，而不是将所有内容重复四次。此外，您还可以将一直测试的值存储在变量中：

function setStyles(connectionColor, connectionStyle,
                   locationColor, locationStyle) {
    document.getElementById("connection").style.color = connectionColor;
    document.getElementById("location").style.color = locationColor;
    document.getElementById("connection").style.fontStyle = connectionStyle;
    document.getElementById("location").style.fontStyle = locationStyle;
}

function submitCheck() {
    var connectionVal = formTest.connection.value,
        locationVal = formTest.location.value;

    if (connectionVal.length==0 && locationVal.length==0) {
        setStyle("#961515", "italic", "#961515", "italic");
    } else if (connectionVal.length==0 && locationVal.length!=0) {
        setStyle("#961515", "italic", "#000000", "normal");
    } else if (locationVal.length==0 && !connectionVal.length!=0) {
        setStyle("#000000", "normal", "#961515", "italic");
    } else {
        setStyle("#000000", "normal", "#000000", "normal");
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

这丝毫不会改变你的逻辑，只会让它更简短，更容易阅读。但是，如果单独测试连接字段和位置字段，也可以稍微优化逻辑

---

与其单独设置颜色和斜体/普通，不如在CSS样式表中定义一些类，并根据需要添加/删除这些类。它不仅使您的JS更简单、更易于阅读，还避免了JS中嵌入特定的颜色。

我更喜欢一种表驱动的方法，它可以减少复制和重复执行代码的数量：

function submitCheck() {
    // arrays of values
    //   connection color, location color, connection fontStyle, location fontStyle
    var values = [
        ["#961515", "#961515", "italic", "italic"],
        ["#961515", "#000000", "italic", "normal"],
        ["#000000", "#961515", "normal", "italic"],
        ["#000000", "#000000", "normal", "normal"]
    ];

    var conLength = formTest.connection.value.length;
    var locLength = formTest.location.value.length;
    var conn = document.getElementById("connection");
    var loc = document.getElementById("location");
    var index;

    if (conLength == 0 && locLength == 0) {
        index = 0;
    } else if (conLength == 0 && locLength != 0) {
        index = 1;
    } else if (conLength != 0 && locaLength == 0) {
        index = 2;
    } else {
        index = 3;
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }

    var data = values[index];
    conn.style.color = data[0];
    loc.style.color = data[1];
    conn.style.fontStyle = data[2];
    loc.style.fontStyle = data[3];
}

---

我更喜欢表驱动的方法，它可以减少复制和重复执行的代码量：

function submitCheck() {
    // arrays of values
    //   connection color, location color, connection fontStyle, location fontStyle
    var values = [
        ["#961515", "#961515", "italic", "italic"],
        ["#961515", "#000000", "italic", "normal"],
        ["#000000", "#961515", "normal", "italic"],
        ["#000000", "#000000", "normal", "normal"]
    ];

    var conLength = formTest.connection.value.length;
    var locLength = formTest.location.value.length;
    var conn = document.getElementById("connection");
    var loc = document.getElementById("location");
    var index;

    if (conLength == 0 && locLength == 0) {
        index = 0;
    } else if (conLength == 0 && locLength != 0) {
        index = 1;
    } else if (conLength != 0 && locaLength == 0) {
        index = 2;
    } else {
        index = 3;
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }

    var data = values[index];
    conn.style.color = data[0];
    loc.style.color = data[1];
    conn.style.fontStyle = data[2];
    loc.style.fontStyle = data[3];
}

---

嗨，卡萨布兰卡，我要把阵列放在哪里？您认为您可以向我展示它在附上

标记时的外观吗？或者

设置样式（“961515”、“000000”、“斜体”、“正常”）进入按钮的onclick？@muudles:查看我的编辑。你只是把它放到你现有的函数中。哦，我非常喜欢这个！谢谢你！嗨，卡萨布兰卡，我要把阵列放在哪里？您认为您可以向我展示它在附上
标记时的外观吗？或者
设置样式（“961515”、“000000”、“斜体”、“正常”）进入按钮的onclick？@muudles:查看我的编辑。你只是把它放到你现有的函数中。哦，我非常喜欢这个！谢谢你+1.我开始修改我的答案，有点像这样，然后发现你已经做得更好了。设置类而不是单独的样式属性肯定更好。谢谢，这正是我想要的。当然，基本上在html文件中，将样式放在
部分的顶部，然后复制我发布的javascript代码。这里有一个例子：谢谢@ggreiner。你知道为什么我会收到一个错误，说连接未定义-document.getElementById（“flashTest”）.sendValFromHtml（connection.value）嗯，在使用变量之前必须先定义它。我假设您想要获取连接输入的值，在这种情况下，您可以执行
document.getElementById（“flashTest”）.sendValFromHtml（formTest.connection.value）+1。我开始修改我的答案，有点像这样，然后发现你已经做得更好了。设置类而不是单独的样式属性肯定更好。谢谢，这正是我想要的。当然，基本上在html文件中，将样式放在
部分的顶部，然后复制我发布的javascript代码。这里有一个例子：谢谢@ggreiner。你知道为什么我会收到一个错误，说连接未定义-document.getElementById（“flashTest”）.sendValFromHtml（connection.value）嗯，在使用变量之前必须先定义它。我假设您想要获取连接输入的值，在这种情况下，您可以执行
document.getElementById（“flashTest”）.sendValFromHtml（formTest.connection.value）