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

本文介绍了一个onclick打印事件中有多个事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have an onclick print event, its working fine but now i have some div's i want to print out, so my question is, how can i make this script working with all id="PrintElement" Or id="PrintElement1" / id="PrintElement2" and so on, so i can add the ID to the div's i want to print out on one paper.

我有这个Javascript，可以和一个名为id ="PrintElement"的div一起使用.

I have this Javascript, thats work with One div called id="PrintElement".

  <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一起工作，或者如果更简单的话，我可以将div的ID称为PrintElement和一个数字...因此它只是打印出ID为的div

Working fine now i just want it to work with more then one div called id="PrintElement" or if easier i can call the divs ID PrintElement and a number... so it just print out the div's with the ID's

<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中用class="PrintElement"替换id="PrintElement"

You should replace id="PrintElement" with class="PrintElement" in your HTML

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

然后:

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

这将为每个PrintElement打开一个新窗口...

This will open a new window for every PrintElement though...

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

You can collect data with a var and then call Popup at the end of the loop.

上面的代码正在使用jQuery ...，因此您需要该库.

The code above is using jQuery... so you'll need the library.

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

If you want to collect data and open only one popup

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

这篇关于一个onclick打印事件中有多个事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！