jQuery/javascript Hinzufügen und Entfernen von Klassen bei Änderung

Question

Ich versuche ein Änderungsereignis zu erstellen. Wenn ein Benutzer also eine Option aus einem Dropdown auswählt, wird die entsprechende Zeile in der Tabelle markiert (durch Hinzufügen einer Klasse).

Ich habe zwei Dinge ausprobiert .. jQuery und Javascript.

Hier ist meine 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'); 

    } 
}); 

Beachten Sie, dass ich Sie Javascript für die ersten zwei Zeilen mit bin, weil ich immer gehalten „val() ist keine Funktion“ Fehler.

Ich habe versucht, mit Hilfe von Javascript zu einfach Klassen hinzufügen/entfernen, aber es scheint nicht meine Syntax zu mögen ...

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

---

Was ich nicht verstehe ist, warum die jQuery isn‘ t arbeiten ... ich habe eine andere Funktion, die perfekt funktioniert:

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

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

}); 

Warum ist der Code oben (auf Klick) zu arbeiten, aber meine nicht auf Änderungsfunktion?

---

Hier 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

Überprüfen Sie dies, es funktioniert tatsächlich.

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

Ich würde empfehlen, versuchen Sie nicht id="1" als Zeilen-IDs zu verwenden. Verwenden Sie HTML5 data attributes statt:

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

Dann einfach jQuery, die die Zeile auswählen wird:

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

Basierend auf dem HTML Ihnen präsentiert, scheint es die bedingte ist nie wahr:

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

und sollte mit Bezug auf das Auswahlelement für einen tatsächlich vorhandenen Optionswert neu geschrieben werden

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

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

    if (tVal === '3') { 

     console.log(tVal); 

    } 

});