jQuery/javascript変更時のクラスの追加と削除

Question

私は変更イベントを作成しようとしています。そのため、ユーザーがドロップダウンからオプションを選択すると、（クラスの追加を介して）テーブルの対応する行が強調表示されます。

私は2つのことを試しました..jQueryとjavascript。ここで

は私のjQueryのです：私は取得保管ので、私は最初の二行のためにJavaScriptを使用しています

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

    } 
}); 

注エラー「valが（）関数ではありません」。

私は単に追加/クラスを削除するにはJavaScriptを使用してみましたが、私の構文を好きにいないようですが...

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

---

私は理解していないことである理由jQueryのISN」私は完全に動作する別の関数を持っています：

$(".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としてid="1"使用しようとしないことをお勧めします。代わりに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) { 

と実際に存在するオプション値のselect要素を参照して書き直す必要があります。

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

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

    if (tVal === '3') { 

     console.log(tVal); 

    } 

});