javascript - 一个onclick打印事件中有多个事件

我有一个onclick打印事件，它可以正常工作，但是现在我想打印一些div，所以我的问题是，如何使此脚本与所有id =“ PrintElement”或id =“ PrintElement1” / id =一起使用“ PrintElement2”等等，所以我可以将ID添加到要在一张纸上打印的div上。

我有这个Javascript，可以与名为id =“ PrintElement”的One div一起使用。

  <script type="text/javascript">
    //Simple wrapper to pass a jQuery object to your new window
    function PrintElement(elem){
        Popup($(elem).html());
    }

    //Creates a new window and populates it with your content
    function Popup(data) {
        //Create your new window
        var w = window.open('', 'Print', 'height=400,width=600');
        w.document.write('<html><head><title>Print</title>');
        //Include your stylesheet (optional)
        w.document.write('<link rel="stylesheet" href="add/css/layout.css" type="text/css" />');
        w.document.write('<link rel="stylesheet" href="add/css/main.css" type="text/css" />');
        w.document.write('</head><body>');
        //Write your content
        w.document.write(data);
        w.document.write('</body></html>');
        w.print();
        w.close();

        return true;
    }
  </script>

然后我有一个div

<div id="PrintElement">
 SOME CODE.....SHORT/LONG
</div>

并激活我拥有的功能

<a onclick="PrintElement('#PrintElement')">Print</a>

现在工作正常，我只希望它与一个以上的div一起使用，它们称为id =“ PrintElement”，或者如果更简单的话，我可以将div的ID称为PrintElement和一个数字...因此它只是打印出带有ID的div

<div id="PrintElement">
 SOME CODE.....SHORT/LONG
</div>
<div>
 SOME CODE.....SHORT/LONG
</div>
<div id="PrintElement">
 SOME CODE.....SHORT/LONG
</div>
<div>
 SOME CODE.....SHORT/LONG
     <div id="PrintElement">
       SOME CODE.....SHORT/LONG
     </div>
     <div>
      SOME CODE.....SHORT/LONG
     </div>
</div>

希望你明白..

最佳答案

您应该在HTML中将id="PrintElement"替换为class="PrintElement"

然后用<a onclick="PrintElement('#PrintElement')">Print</a>更改<a onclick="PrintElement('.PrintElement')">Print</a>

接着：

function PrintElement(elem){
    $(elem).each(function() {
        Popup($(this).html());
    });
}

但是，这将为每个PrintElement打开一个新窗口。

您可以使用var收集数据，然后在循环结束时调用Popup。

编辑：上面的代码正在使用jQuery ...所以您将需要该库。

EDIT2：如果您想收集数据并仅打开一个弹出窗口

function PrintElement(elem){
    var data = '';
    $(elem).each(function() {
        data = data + $(this).html();
    });
    Popup(data);
}

printElement

javascript - 一个onclick打印事件中有多个事件