Question

我想复制这个比较但是没有重复CSS，Divisor类和JavaScript代码中的输入[type = range] 因为如果我复制CSS和JavaScript代码，我将创建超过50个比较，我将无法获得最佳性能代码

<div id="comparison">
  <figure>
    <div id="divisor"></div>
  </figure>
  <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
</div>

CSS代码：

input[type=range]{
  -webkit-appearance:none;
  -moz-appearance:none;
  position: relative;
  top: -2rem; left: -2%;
  background-color: rgba(255,255,255,0.1);
  width: 102%; 
}
input[type=range]:focus { 
  outline: none; 
}
input[type=range]:active { 
  outline: none;  
}

Javascript代码：

var divisor = document.getElementById("divisor"),
slider = document.getElementById("slider");
function moveDivisor() { 
    divisor.style.width = slider.value+"%";
}

Answer 1

使用下面的代码将新的比较实例添加到DOM元素 - 或者如果没有给予document.body 它是纯JS代码，不需要HTML。
如果您想要与<div id='container'></div>来电addComparison(document.getElementById('container'))进行比较。
您的CSS代码适用于生成的比较实例。如果您需要使用任何类或ID，只需将它们添加到所需的元素，如： divisor.id = 'divisor'或divisor.className = 'divisor'

function addComparison(el) {
    var target = el || document.body;
    var comparison = document.createElement('div');
    var figure = document.createElement('figure');
    var divisor = document.createElement('div');
    var input = document.createElement('input');
    input.type = 'range';
    input.min = '0';
    input.max = '100';
    input.value = '50';
    input.oninput = function() {
        divisor.style.width = this.value + '%';
    }
    figure.appendChild(divisor);
    comparison.appendChild(figure);
    comparison.appendChild(input);
    target.appendChild(comparison);
}

没有重复输入的重复div [type = range]

1 个答案: