Question

我正在尝试为客户端编辑Wordpress插件，该插件用于通过使用自定义javascript函数打印优惠券来打印div的内容。这个插件由短代码调用：

[print-button target='div#foo']

目标是容器div的css ID，其中jpg是优惠券唯一的内容。当您单击生成的“打印”按钮时，将打开一个窗口并显示jpg的打印对话框。在页面上使用此插件的一个实例它可以很好地工作，但是当您有两个或更多实例时，在新打印窗口中打开的唯一jpg是页面上的最后一个。这是插件代码：

add_shortcode("print-button", "sc_show_print_button");

function sc_show_print_button($atts, $content = null){

    $target_element = $atts['target'];

    if($target_element == ''){$target_element = "document.body";}

    $output = "<input id=\"coupon\" type='button' onClick='return pop_print()' value='Print Coupon'/>


    <script type='text/javascript'>
    function pop_print(){
        w=window.open(null, 'Print_Page', 'scrollbars=yes');
        w.document.write(jQuery('$target_element').html());
        w.document.close();
        w.print();
    }
    </script>";


    return  $output;
}

我在函数末尾回显了$ target_element变量，它确实正确地列出了每个'target'变量。我只是无法弄清楚为什么当你点击每个其他实例的“打印”按钮时，只显示最后一个实例的图像。我假设我在javascript中看到的东西很简单，我没有看到。

我不是此插件的原作者，并且无法与他们联系。

感谢您的帮助。

Answer 1

因为，当你有多个“按钮”实例时，你有几个带有静态代码的函数“pop_print”的定义。当然，最后一个函数总是执行。

尝试将目标元素作为函数“pop_print”的参数发送。

示例：

add_shortcode("print-button", "sc_show_print_button");

function sc_show_print_button($atts, $content = null){

    $target_element = $atts['target'];

    if($target_element == ''){$target_element = "document.body";}

    $output = "<input id=\"coupon\" type='button' onClick='return pop_print(\'$target_element\')' value='Print Coupon'/>


    <script type='text/javascript'>
    function pop_print(target_element){
        w=window.open(null, 'Print_Page', 'scrollbars=yes');
        w.document.write(jQuery(target_element).html());
        w.document.close();
        w.print();
    }
    </script>";


    return  $output;
}

当然，尝试将插件中的函数替换为外部js文件。

Javascript“打印div的内容”功能重复相同的内容

1 个答案: