Question

我正在构建一个WordPress模板并创建了一个联系表单，我希望在点击时用一个加载的GIF图像替换提交按钮。以前在静态html上我使用下面的jquery代码来完成它。

/* ==============================================
Contact Form
=============================================== */
$('form[name="contact-form"]').submit(function(e) {
    e.preventDefault();

    $("div.submit").html('<img class="loading" src="assets/images/loading-infinity.GIF" alt="" />');    

    /* 
        more code goes here 
    */

});

要在模板上插入图像，我使用<img src="<?php bloginfo('template_url'); ?>/images/myimage.jpg" alt="">：我当然在模板部分使用它。所以我认为我的jquery看起来像这样：

/* ==============================================
Contact Form
=============================================== */
$('form[name="contact-form"]').submit(function(e) {
    e.preventDefault();

    $("div.submit").html('<img src="<?php bloginfo(&quot;template_url&quot;); ?>/images/loading-infinity.GIF" alt="" />');  

    /* 
        more code goes here 
    */

});

然而，加载图片的路径仍然破碎？如何修复图像的路径？

Answer 1

做这样的事情

BaseClass

Answer 2

您的链接已断开，因为您在代码中使用了"。请尝试使用以下代码而不是bloginfo()：

 $('form[name="contact-form"]').submit(function(e) {

    e.preventDefault();

    $("div.submit").html('<img src="<?php echo get_template_directory_uri() ?>/images/loading-infinity.GIF" alt="" />');  

});

Answer 3

这对你有用

     $('form[name="contact-form"]').submit(function(e) {

     e.preventDefault();

    $("div.submit").html('<img src="<?php echo bloginfo("template_url"); ?>/images/loading-infinity.gif" alt="" />');

});

在WordPress模板中使用jQuery替换提交按钮和加载图像

3 个答案: