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

Question

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

我对 html 中的选项卡所做的一切都是在单击事件时调用函数。示例 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 ); 
});
});

这将在 myshortcode 短代码的 #tabcontent 中显示 "HI"。

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

Is there a way to load a shortcode onclick event in javascript?

wordpress

shortcode