javascript - 根据选择框选项向 div 添加 CSS 规则

Question

我有一张纪律处分表。有 5 种类型的纪律处分、警告和严重级别。最严重的级别是暂停，它有几个额外的表字段。这些字段默认通过 CSS 隐藏。当有人选择下拉选项“暂停”时，这些字段应该可见。

这是我最近尝试解决这个问题，但它也不起作用:

<script type="text/javascript">
            $(document).ready(function () {
                var num = "suspn";
                $("#i_action option").each(function () {
                    if ($(this).val() === num) { // EDITED THIS LINE
                        sus();
                    }
                    else { // EDITED THIS LINE
                        unsus();
                    }
                });
            });
            function sus() {
                document.getElementById("susp").className += "susp_show";
            }
            function unsus() {
                document.getElementById("susp").className -= "susp_show";
            }
</script>

和 html:

<select id="i_action" name="i_action">
    <option value="verbl">Verbal Warning</option>
    <option value="1warn">1st Written Warning</option>
    <option value="2warn">2nd Written Warning</option>
    <option value="3warn">3rd Written Warning</option>
    <option value="suspn">Suspension</option>
</select>
<table class="offence" cellpadding="0" cellspacing="0">
    <tr><td>Employee Name:</td> <td><input disabled="true" style="color: #222" type="text" value="<?= $ename00 ?>" /></td></tr>
    <tr><td>Today's Date:</td> <td> <input type="text" value="<?= $today = date("m/d/y") ?> " /></td></tr>
    <tr><td>Date of Infraction:</td> <td> <input type="text" value="<?= $today = date("m/d/y") ?>" /></td></tr>
    <tr id="susp"><td>Length of suspension:</td> <td> <input type="text" value="" /></td></tr>
    <tr id="susp"><td>Suspension Start Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>
    <tr id="susp"><td>Suspension End Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>
    <tr><td>Reason For Action:</td> <td><textarea></textarea></td></tr>
    <tr><td>Employee Comments</td> <td><textarea></textarea></td></tr>
</table>

CSS:

#susp{display: none;}
.susp_show{display: table-row !important;}

Answer 1

在您的添加和删除类名 += "susp_show" 中添加一个空格。它目前正在创建类 Someclassnamesusp_show。 ps，ID 在文档中应该是唯一的，只是注意到您有 3 个 tr'3 和 id susp

$(document).ready(function () {
                
                $("#i_action").change(function(){
                 if($(this).val()=="suspn"){ 
                          
                             $('.susp').css('display','block');
                           
                       }else{
                         $('.susp').css('display','none');
                         }
                    
                });
   
            });

.susp{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="i_action" name="i_action">
    <option value="verbl">Verbal Warning</option>
    <option value="1warn">1st Written Warning</option>
    <option value="2warn">2nd Written Warning</option>
    <option value="3warn">3rd Written Warning</option>
    <option value="suspn">Suspension</option>
</select>
<table class="offence" cellpadding="0" cellspacing="0">
    <tr><td>Employee Name:</td> <td><input disabled="true" style="color: #222" type="text" value="<?= $ename00 ?>" /></td></tr>
    <tr><td>Today's Date:</td> <td> <input type="text" value="<?= $today = date("m/d/y") ?> " /></td></tr>
    <tr><td>Date of Infraction:</td> <td> <input type="text" value="<?= $today = date("m/d/y") ?>" /></td></tr>
    <tr class="susp"><td>Length of suspension:</td> <td> <input type="text" value="" /></td></tr>
    <tr class="susp"><td>Suspension Start Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>
    <tr class="susp"><td>Suspension End Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>
    <tr><td>Reason For Action:</td> <td><textarea></textarea></td></tr>
    <tr><td>Employee Comments</td> <td><textarea></textarea></td></tr>
</table>