是否有方法在javascript中加载onclick事件的短程序？

Question

我试图使用一个砖石画廊的短代码。我想创建4个标签。一旦您单击选项卡#2，它将显示一个div并隐藏其他(css已经隐藏的)。但是，当我单击选项卡#2、3或4时，只有单击与库关联的排序菜单，才会显示砖石库。那么，是否有一种方法可以在此代码中添加一个简单的函数，以便我可以在单击时加载这些短代码？

我对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“。