复制代码的更有效方法

Question

Every time I click the + button I want the same input to display 每次单击+按钮，我都希望显示相同的输入

The way I do it here works fine but seems like the worst way of doing it as just repeating the same code and changing the id's (also if I want for example 5 inputs I would have to repeat this code 5 times). 我在这里做的方式很好，但似乎是最糟糕的方式，因为重复相同的代码并更改id（同样，例如，如果我要输入5次，则必须重复执行5次）。 What would be a better way of doing this? 有什么更好的方法呢？

<html>
<head>

 <script language='JavaScript' type='text/javascript'>

    function show3(){
    document.getElementById('div2').style.display = 'block';
     }


</script>

<style>

   .hide {
   display: none;
   }

</style>
</head>
<body>

<div>

    <input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>

    <p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>

    <button onclick="show3();" type="button">+</button>


</div> 

<script>
    var slider1 = document.getElementById("one");
    var output2 = document.getElementById("two");
    output2.value = slider1.value;

    slider1.oninput = function() {
    output2.value = this.value;
    }
</script>


<div id="div2" class="hide">

    <input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>

    <p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>

    <button onclick="show3();" type="button">+</button>


</div> 

<script>
    var slider2 = document.getElementById("three");
    var output3 = document.getElementById("four");
    output2.value = slider1.value;

    slider2.oninput = function() {
    output3.value = this.value;
    }
</script>



</body>
</html>

 <html> <head> <script language='JavaScript' type='text/javascript'> function show3(){ document.getElementById('div2').style.display = 'block'; } </script> <style> .hide { display: none; } </style> </head> <body> <div> <input type="range" min="0" max="1500" value="0" class="slider2" id="one"/> <p>Value(mm): <input type="text" id="two" size="10" class="special" /></p> <button onclick="show3();" type="button">+</button> </div> <script> var slider1 = document.getElementById("one"); var output2 = document.getElementById("two"); output2.value = slider1.value; slider1.oninput = function() { output2.value = this.value; } </script> <div id="div2" class="hide"> <input type="range" min="0" max="1500" value="0" class="slider2" id="three"/> <p>Value(mm): <input type="text" id="four" size="10" class="special" /></p> <button onclick="show3();" type="button">+</button> </div> <script> var slider2 = document.getElementById("three"); var output3 = document.getElementById("four"); output2.value = slider1.value; slider2.oninput = function() { output3.value = this.value; } </script> </body> </html>

Answer 1

This will work for all the sliders. 这将适用于所有滑块。 But you need to keep in mind a couple of things : 但是您需要记住以下几点：

This will work only for the sliders that are already rendered in the DOM (even if they are hidden) if you render new sliders to the DOM you will need to attach the event listener as I did it in the foreach loop. 这仅适用于已在DOM中渲染的滑块（即使它们已隐藏），如果将新滑块渲染到DOM，则需要像在foreach循环中那样附加事件侦听器。
The input id (eg "one") needs to match the output data-range="one" 输入ID（例如“ one”）需要匹配输出data-range="one"

 function show3(){ document.getElementById('div2').style.display = 'block'; } var sliders = document.querySelectorAll(".slider"); // slider = common class name sliders.forEach(( slider ) => { slider.addEventListener('input', (e) => { const sliderId = e.target.id; const output = document.querySelector(`[data-range=${sliderId}]`); output.value = e.target.value; }); });

 <html> <head> <style> .hide { display: none; } </style> </head> <body> <div> <input type="range" min="0" max="1500" value="0" class="slider" id="one"/> <p>Value(mm): <input type="text" data-range="one" id="two" size="10" class="special" /></p> <button onclick="show3();" type="button">+</button> </div> <div id="div2" class="hide"> <input type="range" min="0" max="1500" value="0" class="slider" id="two"/> <p>Value(mm): <input type="text" data-range="two" id="four" size="10" class="special" /></p> <button onclick="show3();" type="button">+</button> </div> </body> </html>

Answer 2

Might be easier to include the code in the element and clone it (parentNode is the div) : 将代码包含在元素中并对其进行克隆可能会更容易（parentNode是div）：

 <div> <input type="range" min="0" max="1500" value="0" oninput="this.parentNode.getElementsByTagName('INPUT')[1].value = this.value"/> <p>Value(mm): <input type="text" size="10" /></p> <button type="button" onclick="this.parentNode.parentNode.append(this.parentNode.cloneNode(true))">+</button> </div>

Answer 3

I would recommend you to create some kind of class which let you create slider components dynamically. 我建议您创建某种可以让您动态创建滑块组件的类。

Here's a quick example (not optimized): 这是一个简单的示例（未优化）：

 var SliderComponent = (function(doc) { var defaults = { containerSelector: 'body', value: 0, min: 0, max: 1500, inputSize: 10, inputClass: 'special', sliderClass: 'slider', buttonClass: 'button' }, options; function SliderComponent(options) { options = Object.assign({}, defaults, options || {}); this.container = getContainer(options); this.input = createInput(options); this.slider = createSlider(options); this.removeButton = createButton(options.buttonClass, '-'); this.addButton = createButton(options.buttonClass, '+'); this.element = render.apply(this); this.events = []; this.events.push( addEventListener.call(this, 'click', this.removeButton, function() { this.destroy(); }), addEventListener.call(this, 'click', this.addButton, function() { new SliderComponent(options); }), addEventListener.call(this, 'input', this.slider, function(event) { this.input.value = event.target.value; }), addEventListener.call(this, 'input', this.input, function(event) { this.slider.value = event.target.value; }) ) } SliderComponent.prototype.destroy = function() { this.events.forEach(function(e) { e(); }); this.element.remove(); } function addEventListener(name, element, listener) { listener = listener.bind(this); element.addEventListener(name, listener); return function() { element.removeEventListener(name, listener); }; } function getContainer(options) { var container = doc.querySelector(options.containerSelector); if(!container) { throw new Error('Container for selector %s not found', options.containerSelector); } return container; } function createInput(options) { var input = doc.createElement('input'); input.setAttribute('type', 'number'); input.setAttribute('min', options.min); input.setAttribute('max', options.max); input.setAttribute('size', options.inputSize); input.classList.add(options.inputClass); input.value = options.value; return input; } function createSlider(options) { var input = doc.createElement('input'); input.setAttribute('type', 'range'); input.setAttribute('min', options.min); input.setAttribute('max', options.max); input.classList.add(options.sliderClass); input.value = options.value; return input; } function createButton(klass, text) { var button = doc.createElement('button'); button.setAttribute('type', 'button'); button.classList.add(klass); button.textContent = text; return button; } function render() { var element = doc.createElement('div'); element.appendChild(this.slider); element.appendChild(this.input); element.appendChild(this.removeButton); element.appendChild(this.addButton); return this.container.appendChild(element); } return SliderComponent; })(document); var sliders = new SliderComponent();

复制代码的更有效方法

问题描述

3 个解决方案

解决方案1
0 已采纳 2018-02-20 00:07:22

解决方案2
0 2018-02-20 00:15:57

解决方案3
0 2018-02-20 00:22:14

复制代码的更有效方法

问题描述

3 个解决方案

解决方案1 0 已采纳 2018-02-20 00:07:22

解决方案2 0 2018-02-20 00:15:57

解决方案3 0 2018-02-20 00:22:14

解决方案1
0 已采纳 2018-02-20 00:07:22

解决方案2
0 2018-02-20 00:15:57

解决方案3
0 2018-02-20 00:22:14