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

Question

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

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

目标是容器div的css ID，其中优惠券的jpg是唯一的内容。 当您单击生成的“打印”按钮时，将打开一个窗口，并弹出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文件。