javascript - 如何在每个 Accordion 上插入打印按钮？

Question

这个问题已经有答案了:

Can multiple different HTML elements have the same ID if they're different elements? (17 个回答)

已关闭 7 年前。

所以我在我的 php 网页上创建了多个 Accordion 。我希望每个文件上都有一个打印按钮，以便用户可以按照我的格式打印出来。这是代码:

PHP:

for($i=0; $i<$length; $i++) //Length is usually between 3-6
{  
  echo "<div id='nestedAccordion'>";
     echo "<h2><table><thead></thead>";
     echo "<tr><td>". $data[$i][0] . "</td>";
     echo "</tr><tr><td>" . $data[$i][1] . "<td>";
     echo "</tr>";
     echo "</table>";
     echo "</h2>";
         echo "<div>";
             echo "<h3>Subcategory1</h3>" // Couple sub category
         echo "</div>";

     echo "<div id='printableArea'>";
         echo "<p>AD: ".$data[$i][0]."</p>";
         echo "<p>Descripton: ".$data[$i][1]."</p>";
     echo "</div>";
     echo "<input style='float: right' type='button' onclick="."printDiv('printableArea')"." value='Print' />"; 
 }

Javascript:

$(document).ready(function () {
    var parentDivs = $('#nestedAccordion div'),
        childDivs = $('#nestedAccordion h3').siblings('div');

    $('#nestedAccordion h2').click(function () {
        parentDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });

    $('#nestedAccordion h3').click(function () {
        childDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });
});
function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

CSS:

#printableArea{
    display: none
}

这段代码有效，因为我的每个 Accordion 上都有打印按钮。但是，当我单击任何打印按钮并打开打印预览时，数据仅来自第一个 Accordion 。我该如何解决这个问题，以便打印按钮仅包含来自其 Accordion 的数据。

Answer 1

使用 window.print() 打印窗口，这样它就不会针对您的 Accordion 。

试试这个插件 printElement()相反。