Question

梳理了许多不同的Q＆amp;因为我一直无法找到（或者至少解码得足以在我自己的代码中实现）并回答哪些将允许我做我需要做的事情。这个问题与之前的here问题有关。在上一个问题中，我试图根据哪个＆＃34;商店号码＆＃34;来隐藏表格表格的一行。选中后，有多行需要隐藏（或分别显示），我正在努力使用外部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>

和

        <tr class="hide">
            <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="hide">
            <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>
        <tr class="hide">
            <td class="left"><span class="required">*</span>Refrigeration Unit #3:</td>
            <td><input name="refrig3" type="text" required id="refrig3" size="3" onChange="coldValidate(this)"></td>
            <td class="noborder"></td>
        </tr>

当前CSS

.hide {
display: none;
}

尝试使用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;  
    }
}

我已经尝试了document.getElements命令的许多不同变体，但它们都没有为我工作

Answer 1

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

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

注意没有＆＃34;显示＆＃34; CSS中的值。你也可以使用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>

然后是沙拉功能......

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

使用JavaScript更改外部CSS工作表中的单个值

1 个答案: