More then one event in an onclick print event

问题

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.

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>

Then i have a div

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

And to activate the function i have

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

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>

Hope u understand..

回答1:

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

And then change your <a onclick="PrintElement('#PrintElement')">Print</a> with <a onclick="PrintElement('.PrintElement')">Print</a>

And then:

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

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

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

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

EDIT2: 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);  
}

回答2:

Without jQuery, first move the code that enumerates target IDs to a function, don't embed it in the HTML:

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

And in JS:

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

There's a better approach, however. You can use classes (<div class="PrintElement">) in your HTML to mark print targets and then pick them up from PrintElements using document.getElementsByClassName.

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

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

来源：https://stackoverflow.com/questions/20690974/more-then-one-event-in-an-onclick-print-event

标签

javascript

onclick