Больше одного события в событии печати onclick

У меня есть событие печати onclick, его работа прекрасна, но теперь у меня есть div, который я хочу распечатать, поэтому мой вопрос: как я могу заставить этот скрипт работать со всеми id = «PrintElement» или id = «PrintElement1»/id = «PrintElement2» и т. Д., Поэтому я могу добавить идентификатор в div, который я хочу распечатать на одной бумаге.Больше одного события в событии печати onclick

У меня есть этот Javascript, который работает с одним div, называемым 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>

Работа отлично теперь я просто хочу, чтобы работать с более чем один DIV называется ID = «PrintElement» или, если проще, я могу вызвать идентификатор div PrintElement и номер ... поэтому он просто распечатывает 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>

Надежда у понять ..

источник

2013-12-19 Thomas Bøg Petersen

какую библиотеку вы используете JQuery или прототип? –

hmm im новичок в этом, но обычно jQuery. –

Вы должны заменить id="PrintElement" с class="PrintElement" в вашем HTML

, а затем измените <a onclick="PrintElement('#PrintElement')">Print</a> с <a onclick="PrintElement('.PrintElement')">Print</a>

И потом:

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

Это откроет новое окно для каждого PrintElement хотя ...

Вы можете собирать данные с помощью var, а затем вызывать Popup в конце цикла.

EDIT: код выше использует jQuery ... так что вам понадобится библиотека.

EDIT2: Если вы хотите, чтобы собрать данные и открыть только один всплывающее

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

источник

2013-12-19 20:32:38

Thx. для отличного кода не нужно много редактировать, и он работает, как я хочу, THX alot ;-) –

Без jQuery, первый переместим код, который перечисляет идентификаторы целевых к функции, не вставлять его в HTML:

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

И в JS:

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

Однако есть лучший подход. Вы можете использовать классы (<div class="PrintElement">) в своем HTML, чтобы отметить целевые объекты печати, а затем забрать их с PrintElements, используя document.getElementsByClassName.

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

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

источник

2013-12-19 20:29:24 slezica

Thx. для отличного кода, но с помощью Vincent ShowcaseWork .. но THX alot ;-) –

Больше одного события в событии печати onclick

ответ

Смежные вопросы