引用要在WordPress页面上显示的Java脚本中的图像

时间:2021-03-24 作者:Ankhi

如果回答了这个问题,我很抱歉,但在这种情况下,我肯定不知道该问什么。

无论如何,我已经建立了一个图像滑块,点击按钮即可更改图像和图像描述。重点是,我使用javascript动态更改img标记的源。但这些图像实际上并没有出现在页面上。

保存图像的代码是一个简单的数组,我只是对每个数组进行迭代,即:"images/work1.png", 它可以脱机工作,但不能通过php或wordpress。

这不起作用,所以我尝试将其放在php函数中:javascript如下所示:

let imgArray = [
        "<?php echo get_theme_file_uri(\'images/work1.png\') ?>",
        "<?php echo get_theme_file_uri(\'images/work2.png\') ?>",
        ... etc
];
所以html看起来像:<img src="<?php echo get_theme_file_uri(\'images/work1\') ?>">

src标记的内容会发生更改,但不会生效。

知道为什么这两种方法都不起作用吗?该代码之所以有效,是因为通过单击按钮,每个图像的关联文本仍然会更改。只是,图像拒绝显示。

功能。php如下所示:

function lcc_style_files() {
  wp_enqueue_style(\'lcc_main_styles\', get_stylesheet_uri());
  
}

function lcc_script_files() {
  wp_enqueue_script(\'main-lcc-js\', get_theme_file_uri(\'/js/scripts-bundled.js\'), NULL, \'1.0\', true);
}

add_action(\'wp_enqueue_scripts\', \'lcc_style_files\');
add_action(\'wp_enqueue_scripts\', \'lcc_script_files\');

function lcc_features() {
  add_theme_support(\'title-tag\');
}
add_action(\'after_setup_theme\', \'lcc_features\');

2 个回复
SO网友:Tom J Nowell

问题是您试图在javascript文件中使用PHP。PHP only works inside .php files.

如果要从PHP向javascript文件传递信息,请使用wp_localize_script 要将其存储在变量中,例如PHP文件中,请执行以下操作:

$values = array(
    \'foo\' => \'bar\',
);
wp_localize_script( \'yourscripthandle\', \'objectname\', $values );
 
现在每当yourscripthandle 脚本已排队,它将把这些值放在window.objectname.

您可以在javascript中这样访问它们:

const values = window.objectname;
console.log( values.foo ); // prints \'bar\'

https://developer.wordpress.org/reference/functions/wp_localize_script/

SO网友:Ankhi

PHP:函数lcc\\u script\\u files(){wp\\u enqueue\\u script(\'main-lcc-js\',get\\u theme\\u file\\u uri(\'/js/scripts bundled.js\'),NULL,\'2.0\',true);wp\\u localize\\u script(\'main-lcc-js\',\'PHP\\u data\',$imgList=array(\'img1>;get\\u theme\\u file\\u uri(\'/images/work1.png\'),\'img2>;get\\u theme\\u file\\u uri(\'“/images/work2.png”));}

Js:let theImg=文档。查询选择器(.theImg);泰姆。src=Imgaray。img2;

这将起作用,我所要做的(以及TomJ Nowell告诉我的)就是删除php数组值周围的引号和php标记。