使用JavaScript更改外部CSS表中的各个模块值

在梳理了许多不同的Q&A之后，我一直无法找到（或者至少解码到足以在我自己的代码中实现）和答案，这将允许我做我需要做的事情。这个问题与我之前的JS问题联系在一起。在上一个问题中，我试图隐藏表单表中的一行，根据该行选择了“store number”，有多行需要隐藏（或分别显示），我正在尝试使用外部CSS样式表尽可能简化编码

当前HTML

        <tr>
            <td class="left"><span class="required">*</span>Store Number:</td>
            <td>
                <select id="storenumber" name="storenumber" required title="Please select your store ID number" onChange="salad()">
                    <option value="">Select Store Number</option>
                    <option value="010576">010576</option>
                    <option value="011169">011169</option>
                    <option value="008181">008181</option>
                    <option value="010324">010324</option>
                    <option value="008615">008615</option>
                    <option value="009150">009150</option>
                    <option value="014640">014640</option>
                    <option value="010684">010684</option>
                    <option value="011168">011168</option>
                    <option value="014215">014215</option>
                    <option value="008179">008179</option>
                    <option value="008339">008339</option>
                    <option value="008668">008668</option>
                    <option value="031574">031574</option>
                </select>
            </td>
        </tr>

尝试使用JS函数

function salad() {
    var storenumber = document.getElementById("storenumber");
    switch(storenumber.value) {
    case "011169":
    case "008181":
        document.getElementsByClassName("hide") = "display: none";
        break;
    case "010576":
    case "010324":
    case "008615":
    case "009150":
    case "014640":
    case "010684":
    case "011168":
    case "014215":
    case "008179":
    case "008339":
    case "008668":
    case "031574":
        document.getElementsByClassName("hide") = "display: show";
        break;  
    }
}

---

我尝试了许多不同版本的

文档.getElements

命令，但没有一个对我有效

更改您尝试访问的特定元素的类名 你可以试试

document.getElementByClassName("hidden031574")[0].style.display = "block";

注意CSS中没有“show”值。您还可以使用jQuery库

或者为了更好的实施

<tr class="010576">
    <td class="left"><span class="required">*</span>Refrigeration Unit #1:</td>
    <td><input name="refrig1" type="text" required id="refrig1" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>
<tr class="011169">
    <td class="left"><span class="required">*</span>Refrigeration Unit #2:</td>
    <td><input name="refrig2" type="text" required id="refrig2" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>

---

getElementsByClassName

返回节点列表。即使它返回单个节点，也无法将其设置为字符串

display:show

。即使可以，display属性也没有值

show

。您不能更改用外部

CSS

编写的类的内容。保持简单，只需前后切换

hide

类即可。@Rohit416:这听起来很简单，但我不知道如何在不为每个要隐藏/取消隐藏的元素分配id的情况下执行此操作，然后为每个元素编写一行代码。你能给我指出正确的方向，让我知道如何通过类名而不是元素id来设置它吗？谢谢你的输入，但是我正试图远离jQuery，因为这个站点将包含在一个私有且非常安全的网络中。我正在尝试使所需的所有内容都是自包含的，不使用jQuery库没关系，顺便说一句，这是您的首选。但实现这一点的简单方法太多了。只需搜索。谢谢。查找具有特定类的元素，然后添加单独的样式属性，这是一种反模式。相反，在元素中添加或删除类。

document.getElementByClassName("hidden031574")[0].style.display = "block";

<tr class="010576">
    <td class="left"><span class="required">*</span>Refrigeration Unit #1:</td>
    <td><input name="refrig1" type="text" required id="refrig1" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>
<tr class="011169">
    <td class="left"><span class="required">*</span>Refrigeration Unit #2:</td>
    <td><input name="refrig2" type="text" required id="refrig2" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>

function salad() {
    var storenumber = document.getElementById("storenumber");
    document.getElementByClassName(storenumber)[0].style.display = "block";
}