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文件。