如何將類似的JavaScript函數壓縮成一個？

我有大約30個腳本幾乎相同，只是差別很小。我想知道他們是否可以合併爲一個。如何將類似的JavaScript函數壓縮成一個？

例如，下面是其餘27個未顯示其通過3.呼籲職能「寫數據」 1 HTML：

<div class="trashitem" onclick="Writedata1()"> 
    <div class="photobox"> 
    <img src="http://www.fakeimage.jpg"> 
    <input type="hidden" name="write" value="4562711" id="mls_id1"> 
    </div> 
</div> 
<div class="trashitem" onclick="Writedata2()"> 
    <div class="photobox"> 
    <img src="http://www.fakeimage.jpg"> 
    <input type="hidden" name="write" value="7436743" id="mls_id3"> 
    </div> 
</div> 
<div class="trashitem" onclick="Writedata3()"> 
    <div class="photobox"> 
    <img src="http://www.fakeimage.jpg"> 
    <input type="hidden" name="write" value="114992" id="mls_id3"> 
    </div> 
</div>

也都設有一個獨特的價值，這是一個唯一的ID爲什麼我要調用單獨的函數。相應的腳本是：

<script language="javascript"> 
    function Writedata1() 
    { 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    var write_id; 
    write_id = document.getElementById('write_id').value ; 
    var s = fso.CreateTextFile(write_id, true); 
    s.WriteLine("RestoreClicked"); 
    s.WriteLine(document.getElementById('mls_id1').value); 
    s.Close(); 
    } 
</script> 

<script language="javascript"> 
    function Writedata2() 
    { 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    var write_id; 
    write_id = document.getElementById('write_id').value ; 
    var s = fso.CreateTextFile(write_id, true); 
    s.WriteLine("RestoreClicked"); 
    s.WriteLine(document.getElementById('mls_id2').value); 
    s.Close(); 
    } 
</script> 

<script language="javascript"> 
    function Writedata3() 
    { 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    var write_id; 
    write_id = document.getElementById('write_id').value ; 
    var s = fso.CreateTextFile(write_id, true); 
    s.WriteLine("RestoreClicked"); 
    s.WriteLine(document.getElementById('mls_id3').value); 
    s.Close(); 
    } 
</script>

是否有一個劇本我可以改用將適用於在格式寫數據＃（），其中#爲任意數量的有名的所有功能。我不能將腳本限制爲30，它應該是動態的。純粹的JavaScript只請。

修訂問題

下面是完整的代碼，甚至當你點擊一個trashitem DIV，它不會寫入文本文件「keepornew.txt」，因爲它應該。它在包括Shomz和Nina提供的劇本之前就有效。你能發現問題嗎？謝謝

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
<title>Trash</title> 

<SCRIPT LANGUAGE="VBScript"> 

    Sub Window_onLoad 
     window.resizeTo 175,1031 
     window.moveto 0,0 
    End Sub 

</SCRIPT> 

<HTA:APPLICATION icon="C:\Users\ME\Desktop\Abacus\menuIcon.ico" 
    APPLICATIONNAME="WELCOME" 
    SCROLL="yes 
    SINGLEINSTANCE="no" 
    WINDOWSTATE="normal" 
    ShowInTaskBar="no" 
    MinimizeButton="yes" 
    MaximizeButton="no" 
    RESIZE="no" 
    CAPTION="no" 
> 

<style> 
body{background-color:#ffffff;} 
body{background-color:#ffffff;} 

.bordered{ 
    border: 3px solid #D64631; 
} 

.trashitemborder{ 
border: 1px solid black; 
    width:100%; 
    height: 140px; 
    margin-top:10px; 

} 
.trashitem { 
    width:100%; 
    height:110px; 
    margin-left:0px; 
    overflow:hidden; 
} 

.photobox{100%; 
    text-align:center; 
} 
.photobox img{width:100%; 
} 

.pricebox{ 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
margin-left:25px; 
} 

.trashtitle{font-family:arial; 
font-size:20px; 
color:#D64631; 
text-align:center; 
margin-top:-25px; 
} 
.trashcaption{font-family:arial; 
font-size:12px; 
color:#D64631; 
margin-left:-2px; 
margin-bottom:9px; 
text-align:center; 
} 

</style> 
<script language="javascript"> 
function Writedata(id) 
{ 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    var write_id; 
    write_id = document.getElementById('write_id').value ; 
    var s = fso.CreateTextFile(write_id, true); 
    s.WriteLine("RestoreClicked"); 
    s.WriteLine(document.getElementById('mls_id' + id).value); 
    s.WriteLine(document.getElementById('marker_id' + id).value); 
    s.Close(); 
} 
</script> 

<script language="javascript"> 
window.onload = function (event) { 

    var myitem = document.querySelectorAll(".trashitem"); 
    for(h=0; h<myitem.length; h++){ 
     myitem[h].onclick = function(e){ 
      var myitem = document.querySelectorAll(".trashitem"); 

      for(h=0; h<myitem.length; h++){ 
       myitem[h].classList.remove("bordered"); 
      } 
      this.classList.add("bordered"); 

     }; 
    } 
}; 
</script> 

</head> 

<body> 
<input type="hidden" name="write" value="C:\Users\ME\Documents\Temp\keepornew.txt" id="write_id"><br/> 

<div class="trashtitle">TRASH</div> 
<div class="trashcaption">Click comp to restore</div> 

<input type="hidden" name="filler" value="filler" id="filler_id"> 
<input type="hidden" name="MarkerA4" value="MarkerA4"> 
<div class="trashitemborder"> 
<div class="trashitem" onclick="Writedata(4)"> 
    <div class="photobox"> 
    <img src="http://www.fakeimagecom/image1.JPG"> 
    </div> 
<input type="hidden" name="write" value="5189975" id="mls_id4"> 
<input type="hidden" name="write" value="4" id="marker_id4"> 
    <div class="pricebox">$325,000</div> 
</div> 
</div> 
<input type="hidden" name="MarkerB4" value="MarkerB4"> 
<input type="hidden" name="MarkerA3" value="MarkerA3"> 
<div class="trashitemborder"> 
<div class="trashitem" onclick="Writedata(3)"> 
    <div class="photobox"> 
     <img src="http://www.fakeimagecom/image1.JPG"> 
    </div> 
<input type="hidden" name="write" value="5158764" id="mls_id3"> 
<input type="hidden" name="write" value="3" id="marker_id3"> 
    <div class="pricebox">$320,000</div> 
</div> 
</div> 
<input type="hidden" name="MarkerB3" value="MarkerB3"> 
<input type="hidden" name="MarkerA2" value="MarkerA2"> 
<div class="trashitemborder"> 
<div class="trashitem" onclick="Writedata(2)"> 
    <div class="photobox"> 
     <img src="http://www.fakeimagecom/image1.JPG"> 
    </div> 
<input type="hidden" name="write" value="201500274" id="mls_id2"> 
<input type="hidden" name="write" value="2" id="marker_id2"> 
    <div class="pricebox">$302,500</div> 
</div> 

<input type="hidden" name="MarkerB2" value="MarkerB2"> 
<input type="hidden" name="MarkerA1" value="MarkerA1"> 
<div class="trashitem" onclick="Writedata(1)"> 
    <div class="photobox"> 
     <img src="http://www.fakeimagecom/image1.JPG"> 
    </div> 
<input type="hidden" name="write" value="5076992" id="mls_id1"> 
<input type="hidden" name="write" value="1" id="marker_id1"> 
    <div class="pricebox">$375,000</div> 
</div> 
<input type="hidden" name="MarkerB1" value="MarkerB1"> 


</body> 
</html>

來源

2015-08-15 Mathomatic

這些'.trashitem'元素是否共享一個共同父元素？同一父母中是否還有其他元素？ –

有腳本曾經工作？我的問題是事件是從邊界機制中捕獲的，所以trashitem從來沒有達到過。 –

簡單地使一個單一的功能，將接受ID作爲參數：

function Writedata(id) 
{ 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    var write_id; 
    write_id = document.getElementById('write_id').value ; 
    var s = fso.CreateTextFile(write_id, true); 
    s.WriteLine("RestoreClicked"); 
    s.WriteLine(document.getElementById('mls_id' + id).value); 
    s.Close(); 
}

然後調用它像：

<div class="trashitem" onclick="Writedata(1)"> 
<div class="trashitem" onclick="Writedata(2)"> 
<div class="trashitem" onclick="Writedata(3)"> 
etc...

你甚至能夠避免手動輸入的ID通過區分的指數其父級中的單擊元素。

來源

2015-08-15 17:22:56 Shomz

謝謝，我會盡快嘗試並報告回來。 – Mathomatic

感謝Shomz的幫助。 \t 我沒有將它包含在HTML中，但write_id與此html關聯：
。由於某種原因，當我單擊其中一個div時，當我使用您的代碼時，它不會再編寫文本文件。它適用於我以前的代碼。任何想法爲什麼？謝謝 – Mathomatic

以下是完整的代碼：http://pastebin.com/iRDS65WM – Mathomatic

function Writedata(id) { // <-------------------------- add id as parameter 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    var write_id = document.getElementById('write_id').value; 
    var s = fso.CreateTextFile(write_id, true); 
    s.WriteLine("RestoreClicked"); 
    s.WriteLine(document.getElementById(id).value); // <------- use it here 
    s.Close(); 
}

順便說一句，document.getElementById('write_id').value我在哪裏可以找到你的HTML代碼中的ID write_id？

來源

2015-08-15 17:22:28

謝謝，我會盡快嘗試並報告回來。 – Mathomatic

我沒有將它包含在HTML中，但它是：
。出於某種原因，當我單擊其中一個div時，當我使用您的代碼時，它不會再寫入文本文件。它適用於我以前的代碼。任何想法爲什麼？ – Mathomatic

以下是完整的代碼：http：//pastebin.com/iRDS65WM。謝謝！ – Mathomatic

我個人建議使用以下方法：

function Writedata() { 
    var fso = new ActiveXObject("Scripting.FileSystemObject"), 
     write_id = document.getElementById('write_id').value, 
     s = fso.CreateTextFile(write_id, true), 

     // here we find the elements contained within the 
     // clicked element (this) with the name property/attribute 
     // of 'write': 
     valueFromElement = this.getElementsByName('write'); 

    s.WriteLine("RestoreClicked"); 

    // here we retrieve the value from the relevant element 
    // using zero-based indexing: 
    s.WriteLine(valueFromElement[0].value); 
    s.Close(); 
} 

// retrieving all elements with the class-name of 'trashitem', 
// compatible with IE8+ (getElementsByClassName() was preceded 
// in IE by querySelectorAll(), so this is more compatible 
// than using getElementsByClassName()): 
var trashitems = document.querySelectorAll('.trashitem'); 

// iterating over the NodeList returned by querySelectorAll(), 
// using Function.prototype.call() to allow 
// Array.prototype.forEach() to be used on the Array-like NodeList: 
Array.prototype.forEach.call(trashitems, function (trashitem) { 

    // assigning the Writedata() function as the click-event 
    // handler for each .trashitem element-node: 
    trashitem.addEventListener('click', Writedata); 
});

JS Fiddle demo。

這也消除了（侵入性）onclick屬性的需要，並利用addEventListener()方法將clicked元素傳遞給處理指定事件的關聯函數的能力。

參考文獻：

來源

2015-08-15 17:40:07

謝謝，我會盡快嘗試並報告。 – Mathomatic

如何將類似的JavaScript函數壓縮成一個？

回答

相關問題