jQuery/javascript添加和刪除更改上的類

Question

我想創建一個更改事件，因此當用戶從下拉列表中選擇一個選項時，表中相應的行將突出顯示（通過添加一個類）。

我試過兩件事情.. jQuery和JavaScript。

這裏是我的jQuery：

$("#phoneType").change(function() { 

    if (document.getElementById("optionSelect").value == 2) { 
     var selectedStatus = parseInt(document.getElementById("optionSelect").value); 

     $('.clickable-row').removeClass("cra-children-item-selected"); 
     $(this).addClass('cra-children-item-selected'); 

    } 
}); 

請注意，我使用的JavaScript的前兩行，因爲我一直得到「VAL（）不是一個函數」的錯誤。

我試着用JavaScript來簡單地添加/刪除類，但它似乎不喜歡我的語法...

 document.getElementsByClassName("clickable-row").className = "clickable-row"; 
     document.getElementById(selectedStatus).className = "clickable-row item-selected"); 

---

我不明白的是爲什麼jQuery的ISN」 t工作...我有另一個功能，完美的作品：

$(".clickable-row").click(function(event) { 
    console.log($(this).attr('id')); 

    $('.clickable-row').removeClass("item-selected"); 
    $(this).addClass('item-selected'); 

}); 

爲什麼上面的代碼（點擊）工作，但不是我的更改功能？

---

這裏是HTML：

 <table class="table table-striped table-bordered"> 
      <tr> 
       <th scope="col">Type</th> 
       <th scope="col">Number</th> 
      </tr> 
        <tr id="1" class="clickable-row"> 
         <td> 
          Work 
         </td> 
         <td> 
          705-556-6677 
         </td> 
        </tr> 


        <tr id="6" class="clickable-row"> 
         <td> 
          Cellular phone 
         </td> 
         <td> 
          613-444-7777 
         </td> 
        </tr> 
     </table> 
     <select name="phoneType" id="phoneType"> 
<option value="-1">Select</option> 
<option value="3">Home</option> 
<option value="1">Work</option> 
<option value="6">Cellular phone</option> 


</select> 

Answer 1

檢查它，它實際上工作。

$("#phoneType").change(function() { 
 
    var val = $(this).val(); 
 
    $("tr").removeClass("selected"); 
 
    $("#tr" + val).addClass("selected"); 
 
    
 
})

.selected {border: solid 1px #000; background-color:blue;};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped table-bordered"> 
 
      <tr> 
 
       <th scope="col">Type</th> 
 
       <th scope="col">Number</th> 
 
      </tr> 
 
        <tr id="tr1" class="clickable-row"> 
 
         <td> 
 
          Work 
 
         </td> 
 
         <td> 
 
          705-556-6677 
 
         </td> 
 
        </tr> 
 

 

 
        <tr id="tr6" class="clickable-row"> 
 
         <td> 
 
          Cellular phone 
 
         </td> 
 
         <td> 
 
          613-444-7777 
 
         </td> 
 
        </tr> 
 
     </table> 
 
     <select name="phoneType" id="phoneType"> 
 
<option value="-1">Select</option> 
 
<option value="3">Home</option> 
 
<option value="1">Work</option> 
 
<option value="6">Cellular phone</option> 
 

 

 
</select>

Answer 2

我會強烈建議您不要嘗試使用id="1"爲您的行ID。使用HTML5 data attributes代替：

<tr class="clickable-row" data-id="6"> 

然後簡單的jQuery，這將選擇行：根據您提供的HTML

$("#phoneType").change(function() { 

    var id = parseInt($(this).val()); 
    var $row = $('.clickable-row[data-id="' + id + '"]'); 

    $('.clickable-row').removeClass("cra-children-item-selected"); 
    if (id > 0) { 
     $row.addClass('cra-children-item-selected'); 
    } 
}); 

Answer 3

，似乎條件不是真的：

if (document.getElementById("optionSelect").value == 2) { 

和應該改寫爲選擇元素的實際存在的選項值

$("#phoneType").change(function() { 

    var t = $(this), 
     tVal = t.val(); 

    if (tVal === '3') { 

     console.log(tVal); 

    } 

});