jquery - 根据滑块值向表中添加一个类

Question

我有一个工作脚本，它根据用户可配置滑块的值向表格单元格添加填充。滑块值从 15 变为 30。

var slider = document.getElementById("myRange");
var output = document.getElementById("padding-slider");
output.innerHTML = slider.value;

slider.oninput = function() {
 output.innerHTML = this.value;
      var items = document.getElementsByClassName("cell");
 for (var i=0; i < items.length; i++) {
   items[i].style.padding =  this.value + "px 0";
 }
}

我还想table根据滑块值添加类：

18 = .font-med

24 = .font-lrg

30 = .font-x-lrg

codepen  jsfiddle

标签： jquerycss

Answer 1

试试这个代码

var slider = document.getElementById("myRange");
var output = document.getElementById("padding-slider");
var thisTable = document.querySelector('table');
output.innerHTML = slider.value;

slider.oninput = function() {
 output.innerHTML = this.value;
  var thisVal = parseInt(this.value);
  if(thisVal === 18) {
    thisTable.setAttribute('class', 'queue font-med');
  } else if (thisVal === 24) {
    thisTable.setAttribute('class', 'queue font-lrg');
  } else if (thisVal === 30) {
    thisTable.setAttribute('class', 'queue font-x-lrg');
  } else {
    thisTable.setAttribute('class', 'queue');
  }
      var items = document.getElementsByClassName("cell");
 for (var i=0; i < items.length; i++) {
   items[i].style.padding =  thisVal + "px 0";
 }
}

工作网址：https ://codepen.io/vinodmurukesan/pen/MWKzjQa