Select option affecting different elements-CodePudding

I have cards dynamically created in a loop. Inside the cards I have different elements like tables, select inputs, labels, etc. One of my select inputs changes the card header color, which works fine. But there is an option on that same select input that changes the class of a different element in the card and it is not working for me. It is supposed to remove whatever class the element has, replace it with a new one, and do the opposite when the options is not selected.

This is the code for the cards:

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>

What I've tried so far:

$('.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");

  }    
});

And this is the code I use to switch the header color:

//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;
  }  
});

Again, the header color element has no issue. Changing the th element class doesn't work. I tried next, closest, get element by ID, and queryselector. None of them seem to catch class info of that TH element. What am I missing? Thank you!

CodePudding user response：

You can traverse up to the card and find() within the card the element wanted

Something like :

$('.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");

  }
})