Girdi alanı değeri

Question

ile eşleşiyorsa, tabloya sınıf ekleyin. Öncelikle jQuery yazı yazma girişimi için özür dilerim. Ticaretten bir tasarımcıyım.

Tablo var ve bir aralık giriş değeri <th> kimliğiyle eşleştiğinde <th> etkin sınıfına bir etkin sınıf eklemek istiyorum.

HTML:

<input type="range" name="levels" min="1" max="9" /> 
<table id="levels"> 
    <thead> 
     <tr> 
      <th>*</th> 
      <th id="1">Bronze</th> 
      <th id="2">Silver</th> 
      <th id="3">Gold</th> 
      <th id="4">Platinum</th> 
     </tr> 
    </thead> 
</table> 

jQuery şimdiye kadar:

$(document).ready(function(){ 
    $('[type=range]').change(function() { 
     var rangeval = $(this).val(); 
     var th = $("levels th"); 
     //$("#1").addClass(rangeval); 

     if (th.attr("id") == rangeval) { 
      $(this).addClass('active'); 
     } 
    }); 
}); 

ben de tanımsız değişikliği aktif sınıfını gerekir fark

ama sadece jQuery bir sınıf eklemek için almaya çalışıyorum ilk. Böyle

Answer 1

deneyin şey: -

$(document).ready(function(){ 
    $('input[type=range]').change(function() { 
     var rangeval = $(this).val(); 
     $('#levels th').removeClass(); 
     $('#levels th#' + rangeval).addClass('active'); 
    }); 
}); 

Working Demo

Answer 2

Sen aralık input değerinden id seçici inşa edebilirsiniz olarak bunun için bir if deyimi kullanmak gerekmez. Bu deneyin: Yukarıda sadece tek bir seferde etkin olarak gösterilebilir, böylece daha önce herhangi bir öğe ile ayarlandı active sınıf kaldırır

$('[type=range]').change(function() { 
    $('th').removeClass('active').filter('#' + this.value).addClass('active'); 
}); 

Working example

Not olduğu. u Kimlik seçici kullanırken

Answer 3

, bu yüzden bir etiket ismi olarak kabul edecektir aksi

var th = $("#levels th"); 

gibi bir şey olmalıdır.

Answer 4

levels için id seçicinizin doğru olduğundan emin olun.

Sonra aşağıdakileri yapabilirsiniz: Seçilen değerle eşleşen birine th 'ın

eklenti ve active sınıftan

• kaldır'ı tüm aktif sınıfları

  $(document).ready(function(){ 
      $('[type=range]').change(function() { 
       var rangeval = $(this).val(); 
  
       // remove 'm all 
       $("#levels th").removeClass('active'); 
  
       // add active 
       $("#levels th#" + rangeval).addClass('active'); 
  
      }); 
  }); 
  

Demo: https://jsfiddle.net/rLn0w77j/1/