Как сконденсировать аналогичные функции JavaScript в одном?

У меня около 30 скриптов, которые почти идентичны, за исключением небольших различий. Мне интересно, можно ли их объединить в один.Как сконденсировать аналогичные функции JavaScript в одном?

Например, вот HTML, который обращается к функции «WriteData» 1 до 3. Остальные 27 не показаны:

<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>

Каждый из них имеет уникальный идентификатор с уникальным значением, которое почему я вызывал отдельные функции. Соответствующие сценарии:

<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>

Есть сценарий, я могу использовать вместо этого, который будет применяться ко всем функциям, указанным в формате WriteData #(), где # любое число. Я не могу ограничивать скрипт только 30, он должен быть динамическим. Чистый JavaScript только пожалуйста.

ОБНОВЛЕНО ВОПРОС

Вот полный код, даже если щелкнуть trashitem DIV, он не записывает текстовый файл «keepornew.txt», как это должно быть. Он работал до включения сценария Шомца и Нины. Вы можете определить проблему? Спасибо

<!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 никогда не достигается. –

Просто сделать одну функцию, которая будет принимать идентификатор в качестве параметра:

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...

Вы можете даже избежать ручного ввода идентификаторов, различая индекс щелкнув элемент внутри своего родителя.

источник

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 где я могу найти идентификатор write_id в вашем HTML-код?

источник

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.

Это также устраняет необходимость в атрибутах (intrusive) onclick и использует способ метода addEventListener() передать связанный элемент связанной функции, обрабатывающей указанное событие.

Ссылки:

источник

2015-08-15 17:40:07

Спасибо, я попробую скоро и отчитаюсь. – Mathomatic

Как сконденсировать аналогичные функции JavaScript в одном?

ответ

Смежные вопросы