在一个页面中从短代码中调用多个Java脚本

时间：2016-12-23 作者：Adko

我正在准备插件，我很难在一个wp页面/帖子中从每个（相同）短代码调用（并返回）javascript。Javascript只返回页面中最后一个短代码的值。

此处的PHP代码：

add_shortcode( \'ada_chart\', \'ada_chart_stranka\' ); 
function ada_chart_stranka ($atts) {            
    $a = shortcode_atts( array(
        \'cid\' => \'\',
    ), $atts );     
    $cislo_chart = $a[\'cid\'];                
    wp_register_script( \'ada_chart_handle\', plugins_url().\'/ada-chart/js/ada-chart1.js\' );
    $ada_sheet_params = array(
        \'ada_ch_cislo\'      =>  $cislo_chart,
    );  
    wp_localize_script( \'ada_chart_handle\', \'ada_ch\', $ada_sheet_params );
    wp_enqueue_script( \'ada_chart_handle\');     
    return \'atribut: \'.$cislo_chart;        
}
和JS脚本：

    var cisloChart = ada_ch.ada_ch_cislo;
document.getElementById(\'chart_div\'+cisloChart).innerHTML = \'Cislo: \' + cisloChart;
有人能救我吗？谢谢

2 个回复
最合适的回答,由SO网友:cybmeta 整理而成

一个脚本每页只能排队和本地化一次；所以，你所描述的是正确的行为。我认为您混淆了本地化脚本和打印内联JavaScript。此外，排队和本地化应在wp_enqueue_scripts 行动

你需要用不同的方法思考。

例如（仅举一个例子），您可以使用dataset API：

首先，将脚本排队：

add_action( \'wp_enqueue_scripts\', \'cyb_enqueue_scripts\' );
function cyb_enqueue_scripts() {
    wp_enqueue_script( \'ada_chart_handle\', plugins_url().\'/ada-chart/js/ada-chart1.js\' );
}
其次，使用数据atribute包括cid 值：

add_shortcode( \'ada_chart\', \'ada_chart_stranka\' ); 
function ada_chart_stranka ($atts) {            
    $a = shortcode_atts( array(
        \'cid\' => \'\',
    ), $atts );     

    $cislo_chart = $a[\'cid\'];                

    return \'<div data-cid="\' . $cislo_chart . \'"></div>\';        
}
第三，编写JavaScript，使用dataset API读取数据cid属性并执行所需操作：

// Get all elements with data-cid attribute
var a = document.querySelectorAll(\'[data-cid]\');

// Loop over all selected elements
for (var i in a) if (a.hasOwnProperty(i)) {

    // Get the value of data-cid attribute for current element in the loop
    var cid = a[i].getAttribute(\'data-cid\');

    // Do something with the cid value

}

SO网友:Adko

Cybmeta，

非常感谢你的回答。你的想法为我节省了很多不眠之夜）

我试图使用你的解决方案，但遇到了一些麻烦。浏览器显示了空div，Javascript中没有任何错误。

但最后，我将您和我的解决方案结合起来，效果非常好。似乎wp\\u enqueue\\u脚本更适合在短代码内使用。

最终解决方案：

PHP脚本：

    add_shortcode( \'ada_chart\', \'ada_chart_stranka\' ); 

function ada_chart_stranka ($atts) {            
    $a = shortcode_atts( array(
        \'cid\' => \'\',
    ), $atts );   

    $cislo_chart = $a[\'cid\'];                
   wp_enqueue_script( \'ada_chart_handle\', plugins_url().\'/ada-chart/js/ada-chart.js\');        
    return \'atribut: \'.$cislo_chart.\'<br><div id="chart_div\'.$cislo_chart.\'" data-cid="\' . $cislo_chart . \'" style="height: 150px; background: #d5d5d5"></div>\';       
}
Javascript：

    var a = document.querySelectorAll(\'[data-cid]\');
    for (var i in a) if (a.hasOwnProperty(i)) {

      // Get the value of data-cid attribute for current element in the loop
      var cid = a[i].getAttribute(\'data-cid\');

      \'Cislo: \' + cid;

      // Do something with the cid value
      document.getElementById(\'chart_div\'+cid).innerHTML = \'Cislo: \' + cid;
    }

标签： plugins   pages   shortcode   小码农  

相关推荐

Shortcode to update user meta

我想在前端创建一个按钮，当用户单击时，值；“用户元”；更改“验证”function func_change_validate() { if (is_user_logged_in()) { $current_user = wp_get_current_user(); $new_value = \'validate\'; $updated = update_user_meta( $user_id, \'User_met