選擇影響不同元素的選項

我在回圈中動態創建了卡片。在卡片內部，我有不同的元素，如表格、選擇輸入、標簽等。我的選擇輸入之一更改了卡片標題顏色，效果很好。但是在同一個選擇輸入上有一個選項可以改變卡片中不同元素的類，它對我不起作用。它應該洗掉元素具有的任何類，用新的類替換它，并在未選擇選項時執行相反的操作。

這是卡片的代碼：

主檔案

 <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 元素的類資訊。我錯過了什么？謝謝！

uj5u.com熱心網友回復：

您可以遍歷卡片并在元素想要的卡片中找到（）

就像是 ：

$('.form-select').on('change', function() {

  const $th = $(this).closest('.card').find('th[name=row1field1]').removeClass();
  
  if ($(this).val() == 'EXP') {
  
    $th.addClass(" text-center py-1 px-1 fw-bold text-decoration-line-through");

  } else {

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

  }
})

標籤：javascript php html 查询

上一篇：Jquery/Ajax自動完成文本框在ASP.net中不起作用

下一篇：JQuery文本函式未顯示文本