Question

以下是页面中包含的代码

<script type="text/javascript">
    // When the document is ready, initialize the link so
    // that when it is clicked, the printable area of the
    // page will print.
    $(function() {
        // Hook up the print link.
        $("a").attr("href", "javascript:void(0)").click(function() {
            // Print the DIV.
            $( ".printable" ).print();

            // Cancel click event.
            return(false);
        });
    });
</script>

Here is a codepen

按钮在笔中不起作用，但在本地工作。

我要做的是让用户打印每个列表项目的内容，你可以告诉它是Q＆amp; A所以基本上让用户能够在点击按钮时打印每个Q＆amp; A对

我只提供了两个提供最小例子来帮助我找出错误的位置。

正在发生的事情是，无论我点击哪个按钮，它总是会打印出第一个“li”和“printable”类，我不知道如何区分每个部分，以便按钮理解为只打印'this '而不是第一个拥有该类的李正在做的事情。

显然这是一个问题，因为每个答案都有一个“点击打印”按钮，我不希望他们都打印相同的Q＆amp; A对。

这有意义吗？

我的直觉是在游戏中使用某种循环或迭代数组，但我对JavaScript非常陌生，所以我正在寻找一种中等挑战性的解决方案。

Answer 1

您可以使用简单的java脚本打印页面的特定div

    var prtContent = document.getElementById("your div id");
    var WinPrint = window.open('','','letf=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();

Answer 2

是的，它确实有意义。您正在选择要使用$（'。printable'）打印的元素.print（[1]）;这意味着，打印匹配我选择的第一个元素，即.printable。具有类可打印的第一个元素。您应该做的是将每个按钮与相应的部分绑定，并使用ID而不是类来选择元素。由于ID是唯一的！

function(){
        $('.printBtn').attr('href', 'javascript:void( 0 )').click(function(){
            //select the corresponding section, first parent li that have .printable class
            var section = $(this).closest("li.printable");
            // Print Div
            $(section).print([1]);

            // Cancel click event
            return(false);
        });

想要使用JavaScript打印页面的特定部分

2 个答案: