Wordpress 有没有办法在javascript中加载快捷码onclick事件？

我正在尝试使用砖石画廊的短代码。我想创建4个选项卡。单击选项卡#2后，它将显示一个div并隐藏其他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"]

---

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');

---

这将在

myshortcode

短代码的

#tabcontent

中显示“HI”。

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');

---

这将在

myshortcode

短代码中的

#tabcontent

中显示“HI”。

您是否使用jQuery？能否在JSFIDLE上复制相同的内容，出现的是第一个选项卡内容库。但是其他3个短代码并没有一直加载。当我点击一个标签时，第二个图库应该显示出来，但为空。但是，当我单击作为库的一部分的排序下拉列表时，库中的图像就会加载。不管发生什么，我都需要加载它们。我编辑了这个问题，这样你就能明白我的意思。这实际上与JavaScript或jQuery无关。WordPress短代码在服务器端呈现。如果您的选项卡没有显示您期望的内容，那么最好检查PHP代码（woocommerce插件或您正在使用的任何woo主题）。您是否正在使用jQuery？您是否可以在JSFIDLE上复制相同的内容，现在出现的是第一个选项卡内容库。但是其他3个短代码并没有一直加载。当我点击一个标签时，第二个图库应该显示出来，但为空。但是，当我单击作为库的一部分的排序下拉列表时，库中的图像就会加载。不管发生什么，我都需要加载它们。我编辑了这个问题，这样你就能明白我的意思。这实际上与JavaScript或jQuery无关。WordPress短代码在服务器端呈现。如果你的标签没有显示你期望的内容，你最好检查PHP代码（woocommerce插件或你正在使用的任何woo主题）。如果我有4个不同的标签，我如何复制它来创建额外的标签，以及它知道在哪里粘贴短码？示例：我单击的选项卡id是#tab-1，我希望它在div中显示#tabcontent-1和短代码。然后，如果我单击#tab-2，则显示#tabcontent-2和短代码。另外，我是否将参数表中的“myshortcode”替换为gridfx的短代码？我的用户

$（“#元素”）

将单击事件添加到您的

$（“#tag-1”）

，

$（“#tag-1”）

等，并添加各种函数添加ajax操作。无论你给wp#ajax#

myshortcode

什么，这里都会有用户作为“动作”：

'myshortcode'

。好吧，如果点击了#tab-2，我该如何告诉它在#tabcontent-2中显示短代码？

$（“#tab-2”）。点击（function（）{/code>var参数={键入：'POST'，url:ajaxhandle，数据：{“action”：'myshortcode'}，//数据类型：'json'，超时：30000，beforeSend:function（）{}，success:function（res）{
$（“#tabcontent”）.html（res）；
}；$.ajax（参数）；}）；更改突出显示的行如果我有4个不同的选项卡，我如何复制它来创建其他选项卡，以及它知道在哪里粘贴短代码？例如：我单击的选项卡id是#tab-1，我希望它在div中显示#tabcontent-1和短代码。然后如果我单击#tab-2，则显示#tabcontent-2和内部短代码。Al那么，我是否要用gridfx的短代码替换参数表中的“myshortcode”？我的用户
$（“#元素”）
而是将单击事件添加到您的
$（“#tag-1”）
，
$（“#tag-1”）
中，并添加各种函数添加ajax操作。无论您给wp#ajax
myshortcode什么，这里的用户都将作为“操作”：
'myshortcode'
。那么，如果单击了#tab-2，我该如何告诉它在#tabcontent-2中显示短代码呢？
$（“#tab-2”）。单击（function（）{
var参数={type:'POST'，url:ajaxhandle数据：{“action:'myshortcode'}，//数据类型：'json'，超时：30000，beforeSend:function（）{}，success:function（res）{
$（“#tabcontent”）.html（res）；
}；$.ajax（params）；}）；更改突出显示的行