Question

我有一个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>

现在工作正常我只想让它与一个名为id =“PrintElement”的div一起使用，或者如果更容易我可以调用divs ID PrintElement和一个数字......所以它只是用ID打印出div的< / p>

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

希望你明白..

Answer 1

您应该将id="PrintElement"替换为HTML中的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);  
}

Answer 2

如果没有jQuery，首先将枚举目标ID的代码移动到函数中，不要将其嵌入HTML中：

<a onclick="PrintElements()">Print</a>

在JS中：

function PrintElements() {
    printElement('#PrintElement1')
    printElement('#PrintElement2')
}

然而，有一种更好的方法。您可以在HTML中使用类（<div class="PrintElement">）来标记打印目标，然后使用PrintElements从document.getElementsByClassName中选择它们。

function PrintElements() {
    targets = document.getElementsByClassName('PritnElement')

    [].forEach.call(targets, function(x) {
        PrintElement(x)
    })
}

onclick打印事件中的多个事件

2 个答案: