Question

我正在尝试使用Masonry Gallery的短代码。我想创建4个标签。单击选项卡＃2后，它应显示一个div并隐藏其他（已被css隐藏）。但是，当我单击选项卡＃2,3或4时，在您单击与库关联的排序菜单之前，不会显示砌体库。那么有没有办法为这段代码添加一个简单的函数，以便我可以在点击时加载短代码？

我正在使用html中的选项卡调用click事件上的函数。示例Html：onClick =“displayClothing（）”

JAVASCRIPT：

function displayClothing() {
document.getElementById("tab-1").style.display = "block";
document.getElementById("tab-2").style.display = "none";
document.getElementById("tab-3").style.display = "none";
document.getElementById("tab-4").style.display = "none";
document.getElementById("grid-fx1") {
    //Load gridfx id #1 shortcode  by calling script
 }
}
function displayPocket() {
document.getElementById("tab-2").style.display = "block";
document.getElementById("tab-1").style.display = "none";
document.getElementById("tab-3").style.display = "none";
document.getElementById("tab-4").style.display = "none";
document.getElementById("grid-fx2") {
    //Load gridfx id #2 shortcode  by calling script
 }
}
function display287art() {
document.getElementById("tab-3").style.display = "block";
document.getElementById("tab-1").style.display = "none";
document.getElementById("tab-2").style.display = "none";
document.getElementById("tab-4").style.display = "none";
document.getElementById("grid-fx3") {
    //Load gridfx id #3 shortcode by calling script
 }
}   
function display350art() {
document.getElementById("tab-4").style.display = "block";
document.getElementById("tab-1").style.display = "none";
document.getElementById("tab-2").style.display = "none";
document.getElementById("tab-3").style.display = "none";
document.getElementById("grid-fx4") {
    //Load gridfx id #4 shortcode by calling script
 }
}

我想要做的是加载，但是在不同的DIV中会有4个不同的短片：

 [gridfx theme="light" posttypes="product"  show_title="1" columns=6 integrate="woocommerce" item_custom_field="woocommerce" single_item_custom_field"=woocommerce" excerpt_over_image="30" sortmenu="1"]

Answer 1

functions.php

function its_my_shortcode(){
echo "HI";
}

add_shortcode('myshortcode', 'its_my_shortcode');

function ajax_r(){
do_shortcode('[myshortcode]');
}

add_action ( 'wp_ajax_myshortcode', 'ajax_r' );
add_action ( 'wp_ajax_nopriv_myshortcode', 'ajax_r' );

function make_on_init(){ 
echo "<script>var ajaxhandle = '".admin_url('admin-ajax.php')."';</script>"; 
} 

add_action('wp_head', 'make_on_init');

<强> JQuery的

jQuery(document).ready(function($){
$("#element").click(function(){
var params = {
            type: 'POST',
            url: ajaxhandle,         
            data:  {
                "action" : 'myshortcode'                                
            },
            //dataType: 'json',
            timeout: 30000,
            beforeSend : function(){  

            },
            success: function( res ) {  
                $("#tabcontent").html(res);
            }

        };
        $.ajax( params ); 
});
});

这将从#tabcontent短代码myshortcode中显示“HI”。

有没有办法在javascript中加载短代码onclick事件？

1 个答案: