復制代碼的更有效方法
[英]More efficient way of duplicating the code
問題描述
每次單擊+按鈕，我都希望顯示相同的輸入
我在這里做的方式很好，但似乎是最糟糕的方式，因為重復相同的代碼並更改id（同樣，例如，如果我要輸入5次，則必須重復執行5次）。 有什么更好的方法呢？
<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>
3 個解決方案
解決方案1
0 已采納 2018-02-20 00:07:22
這將適用於所有滑塊。 但是您需要記住以下幾點：
- 這僅適用於已在DOM中渲染的滑塊（即使它們已隱藏），如果將新滑塊渲染到DOM，則需要像在foreach循環中那樣附加事件偵聽器。
- 輸入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>
解決方案2
0 2018-02-20 00:15:57
將代碼包含在元素中並對其進行克隆可能會更容易（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>
解決方案3
0 2018-02-20 00:22:14
我建議您創建某種可以讓您動態創建滑塊組件的類。
這是一個簡單的示例（未優化）：
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();
在沒有 if 語句的情況下，是否有更有效的方法來執行此代碼？
[英]Is there a more efficient way of doing this code without if statements?
而不是重復代碼塊，而是編寫此javascript的更有效方法？
[英]Instead of repeating blocks of code, more efficient way to write this javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.