Question

我有大约30个几乎相同的脚本，除了小差异。我想知道他们是否可以合而为一。

例如，这里是调用函数的HTML＆＃34; Writedata＆＃34;其余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>

它们每个都有一个具有唯一值的唯一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>

是否有一个我可以使用的脚本，它将适用于以Writedata＃（）格式命名的所有函数，其中#是任意数字。我不能将脚本限制为30，它应该是动态的。纯粹的JavaScript只是请。

更新的问题

以下是完整的代码，即使您点击trashitem div，它也不会写入文本文件＆＃34; keepornew.txt＆＃34;正如它应该。它包括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>

Answer 1

只需创建一个将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。

Answer 2

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();
}

btw，document.getElementById('write_id').value我在哪里可以找到你的html代码中的ID write_id？

Answer 3

我个人建议采用以下方法：

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-element传递给处理指定事件的关联函数的能力。

参考文献：

如何将类似的JavaScript函数压缩成一个？

3 个答案: