选择影响不同元素的选项

【问题标题】：Select option affecting different elements选择影响不同元素的选项
【发布时间】：2021-10-31 16:28:44
【问题描述】：

我在循环中动态创建了卡片。在卡片内部，我有不同的元素，如表格、选择输入、标签等。我的一个选择输入改变了卡片标题的颜色，效果很好。但是在同一个选择输入上有一个选项可以更改卡中不同元素的类，它对我不起作用。它应该删除元素具有的任何类，用新的类替换它，并在未选择选项时执行相反的操作。

这是卡片的代码：

main.php

 <div class="card shadow-sm h-100 border-dark rounded" id="mycards">
 <span class="mySpan"> <!--CONTENT INSIDE SPAN -->                                 
 <div class="container"> <!-- IS USE THIS CONTAINER AS THE CARD HEADER-->
      <input type="hidden" class="cardid" name="mycardId" value="<?php echo $cardId ?>" id="cardid">
      
 <form class="row row-cols pt-1 pb-1" data-background-color="<?php echo "$color"; ?>" style="width: 238px; height: 40px;"> 
                        
      <label class="pl-2 col text-start fs-4 fw-bold" name="cardNumber" id="cardNumber" style="padding-left: 10px; max-width: 10rem" contenteditable="true"><?php echo $cardNumber; ?></label>
             <select class="col form-select form-select-sm" id="selectField" name="selectField" data-name="selectField" style="max-width: 6rem; height: 32px;" aria-label=".form-select-sm example">
                          
                   <option <?php if ($selectField == "AVL") echo "selected" ?> style="font-weight: bold;" value="AVL"><strong>AVLICU</option>
                   <option <?php if ($selectField == "ICU") echo "selected" ?> value="ICU">ICU</option>
                   <option <?php if ($selectField == "M-S") echo "selected" ?> value="M-S">M-S</option>
                   <option <?php if ($selectField == "EXP") echo "selected" ?> value="EXP">EXP</option>
                          
             </select>
                      
                    </form>
                </div>
             
            <div class="card-body px-0 py-0">
                  
                <table id="firstTable" class="table table-responsive-md table-striped table-borderless text-center mb-0" style="width: 237px; table-layout: fixed;">
                    <thead>
                        <tr>
                         <!--I NEED TO TOGGLE THE CLASS OF THIS TH ELEMENT WHEN OPTION "EXP" IS SELECTED ABOVE-->
                            <th colspan="3" id="row1field1" name="row1field1" class="text-center py-1 px-1 fw-bold <?php if($selectField == "EXP") echo "text-decoration-line-through" ?>" style="max-width: 237px; text-transform: uppercase; font-size: 18px;" contenteditable="true" ><?php echo $row1field1; ?></th>
                            
                        </tr>
                    </thead>
                </table> 

到目前为止我已经尝试过：

$('.form-select').on('change', function() { 
  if ($(this).val() == 'EXP') {
      $(this).next('th').removeClass();
      $(this).next('th').addClass(" text-center py-1 px-1 fw-bold text-decoration-line-through");

}else{

    $(this).next('th').removeClass();
    $(this).next('th').addClass(" text-center py-1 px-1 fw-bold");

  }    
});

这是我用来切换标题颜色的代码：

//CHANGE COLOR OF HEADER ELEMENT WITH DATA-BACKGROUND-COLOR CSS
$('.form-select').on('change', function() {   
switch ($(this).val()) {
    case 'AVL':
      $(this).parent().attr('data-background-color', 'avl');
    case 'ICU':
      $(this).parent().attr('data-background-color', 'icu');           
      break;
    case 'M-S':
      $(this).parent().attr('data-background-color', 'ms');
      break;
  }  
});

同样，标题颜色元素没有问题。更改第 th 元素类不起作用。我尝试了下一个，最接近的，按 ID 获取元素和查询选择器。他们似乎都没有捕捉到那个 TH 元素的类信息。我错过了什么？谢谢！

【问题讨论】：

• 没有charlietfl，不幸的是还有另一个表，它也使用了一个元素。
• @freedomn-m 在没有给出参数时删除所有类
• @charlietfl 是的，我在您查看我自己的链接时发表评论之前删除了我的评论...