0

对不起，如果我遗漏了什么（我是 JS 的初学者）。我正在寻找使用PrintThis.js JQuery 插件将打印按钮添加到任何具有“printdiv”类的 div。我正在使用 Jquery 对按钮和 div 类进行编号，并将所需的 JQuery 代码附加到页面底部的脚本标记中。

这是我用我正在使用的代码制作的代码笔。https://codepen.io/hinte019/pen/yEybmG?editors=1010

这里也是代码形式

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="printthis/printThis.js"></script>
    </head>
    <body>
        <div class="printdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem voluptatibus, magni, alias eaque dolor quisquam placeat, similique atque ratione fugiat impedit nam numquam accusantium. Deserunt reiciendis nulla omnis necessitatibus, quo.</p></div>
        <div class="printdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit labore commodi, magnam corrupti dignissimos hic soluta. Distinctio quod saepe, tempora inventore ipsum, eligendi, dignissimos, eos recusandae perspiciatis odit consequuntur! Optio.</p></div>
        <div class="printdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio fugiat earum, quibusdam soluta ipsa voluptas porro nostrum cupiditate vel modi nesciunt sint rem, vitae id exercitationem debitis, saepe eius?</p></div>
        <script>
        $(function () {
            // print divs
            var i = 1;
            $("body script").append('$(document).ready(function () {');
            $('.printdiv').each(function(){
                $(this).removeClass('printdiv').addClass('printdiv'+i);
                $('.printdiv'+i).prepend('<button type=\"button'+i + '\" class=\"btn btn-primary printbutton' +i + '\">Print<\/button>');
                var printcode = '\r\n        $(\'.printbutton'+i + '\').click(function () {\r\n            $(\'.printdiv'+i + '\').printThis();\r\n        });';
                $("body script").append(printcode);
                i++;
            });
            $("body script").append('\r\n});');
        });
        </script>
    </body>
</html>

这导致打印

$(document).ready(function () {
    $('.printbutton1').click(function () {
        $('.printdiv1').printThis();
    });
    $('.printbutton2').click(function () {
        $('.printdiv2').printThis();
    });
    $('.printbutton3').click(function () {
        $('.printdiv3').printThis();
    });
});

结果代码应该是正确的，但是打印按钮不起作用:(

4

2 回答 2

0

问题在于，script您在其中附加代码的正文已经被 js 引擎解析/处理，因此您无法更改其内容。

您应该创建一个内存script，并在填充后将其附加到 DOM。

$(function() {
  // print divs
  var i = 1;
  var script = $('<script>');
  script.append("$(document).ready(function () {");
  $(".printdiv").each(function() {
    $(this)
      .removeClass("printdiv")
      .addClass("printdiv" + i);
    $(".printdiv" + i).prepend(
      '<button type="button' +
        i +
        '" class="btn btn-primary printbutton' +
        i +
        '">Print</button>'
    );
    var printcode =
      "\r\n        $('.printbutton" +
      i +
      "').on('click', function () {\r\n            $('.printdiv" +
      i +
      "').printThis();\r\n        });";
    script.append(printcode);
    i++;
  });
  script.append("\r\n});");
  script.appendTo('body');
});
于 2018-05-30T16:29:41.773 回答
0

一种更简单的方法来完成你想要的：

改成html（包括源码中的打印按钮）：

<div class="printdiv">
    <p>Lorem ipsum dolor sit amet</p>
    <button class="btn btn-primary printbutton">Print</button>
</div>
<div class="printdiv">
    <p>consectetur adipisicing elit</p>
    <button class="btn btn-primary printbutton">Print</button>
</div>
<div class="printdiv">
    <p>vitae id exercitationem debitis</p>
    <button class="btn btn-primary printbutton">Print</button>
</div>

jQuery：

$('.printButton').on('click', function(){
    var $parent = $(this).parent('.printdiv');
    $parent.printThis();
});

这个 jQuery 在单击 a 时说button，找到与该类匹配button的父级并将其作为选择器传递给.divprintDivprintThis

此外，我建议将所有 javascript/jQuery 移出页面并放入它自己的文件中。

所以你会有：

<script src="path/to/jQuery"></script>
<script src="path/to/printThis"></script>
<script src="path/to/your/custom/javascript"></script>

重要的提示：

  • 动态附加<script>通常不是必需的，并且是影响 DOM 的一种非常迂回笨拙的方式。
  • 使用$.on('click',...而不是$.click. 对于$.click与选择器匹配的每个元素，都会创建一个单独的处理程序，并且仅适用于 DOM 中已经存在的元素（因此您的初始代码中存在问题）。$.on适用于动态添加的元素
于 2018-05-31T15:02:49.927 回答