个人中心
gpt4 book ai didi

javascript - WordPress 无法处理 jQuery 代码

转载 作者：行者123 更新时间：2023-12-03 09:03:49 24 4
gpt4 key购买 nike

我已从网站请求 API 来检查电子邮件的可用性，并且我获得了 jQuery 代码以将该 API 集成到我的网站。

我使用WordPress，我尝试添加代码，但它不起作用，我不知道为什么。我怀疑这是一个 jQuery 库问题，所以我将其加载到“function”文件中，并加载到 google API 的脚本中，但什么也没有。

感谢您的帮助，这是代码(顺便说一下，我也尝试使用“jQuery”进行更改。)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">   
    <head>
        <meta charset="utf-8" />
        <title>emailverifyapi.com : License Key Sample.</title>
        <style type="text/css">
            .statusUnknown {
                color: #c1c72c;
            }
            .statusOk {
                color: #009933;
            }
            .statusBad, .errorMsg {
                color: #ff0000;
            }
            input[type='text'] {
                width: 300px;
            }
            p label {
                display: inline-block;
                width: 60px;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>    
    <body>
         <h1>emailverifyapi.com : email verification demo using simple key authentication with jQuery.</h1>

         <h2>About</h2>

        <p>This example shows how to perform email verification using just client side scripting and invoking a simple key based RESTful endpoint at <a href="https://api.emailverifyapi.com" target="_blank">api.emailverifyapi.com</a>.</p>
         <h2>How to run this sample</h2>

        <p>This page can be hosted anywhere (i.e. any web host or platform). The only thing needed is a valid license key.</p>
         <h2>Key features</h2>

        <ul>
            <li>Compatible with all modern browsers</li>
            <li>Uses jQuery 1.11.1</li>
            <li>No server side scripting required</li>
        </ul>
        <hr />
         <h2>Try it</h2>

        <p>
            <label for="key">Key:</label>
            <input type="text" id="key" name="key" tabindex="1" maxlength="20" />
        </p>
        <p>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" tabindex="2" />
            <input type="button" name="submit" id="submit" tabindex="3" value="verify" />
        </p>
        <div id="validationResult"></div>
        <!--Result output here-->
        <script>
            /*nest key logic inside document.ready to ensure functionality only available once document has fully loaded in browser.*/
            $(function() {
                console.log("ready!");

                $('#submit').click(function() {
                    var emailText = $('#email').val(); // get key from text box entry
                    var keyText = $('#key').val(); // get email address to be checked from text box

                    if (keyText.length == 0) {
                        $('#validationResult').html("<span class='errorMsg'>Please enter key.</span>");
                        return;
                    }

                    if (emailText.length == 0) {
                        $('#validationResult').html("<span class='errorMsg'>Please enter something for email.</span>");
                        return;
                    }

                    $('#validationResult').html("verifying...");

                    var emailVerifyApi = '//api.emailverifyapi.com/api/a/v1?email=' + encodeURIComponent(emailText) + '&key=' + keyText;

                    /*execute remote request to perform email verification. Any errors will appear in the developer console (e.g. viewable using Chrome developer tools)*/
                    $.getJSON(emailVerifyApi, {})
                        .done(function(data) {
                        reportResult(data);
                    })
                        .fail(function(jqxhr, textStatus, error) {
                        var err = textStatus + ", " + error;
                        console.log("Request failed: " + err);
                    });;
                });
            });

            /*Output result to the 'validationResult' div element*/
            function reportResult(data) {
                var status = data['status'].toLowerCase(); // get 'status' from REST response
                var additionalStatus = data['additionalStatus']; // get 'additionalStatus' from REST response
                var message = data['Message']; // if there is an error (e.g. license issues), a notification will appear in the 'Message" from REST response.

                console.log(status);
                console.log(additionalStatus);
                console.log(message);

                var statusHtml;

                // if there is an error message, show here
                if (message != null && message != '') {
                    statusHtml = "<span class='errorMsg'>Error. Message='" + message + "' .</span>";
                } else {
                    // map REST response data to presentation messages.
                    switch (status) {
                        case 'ok':
                            statusHtml = "<span class='statusOk'>Email address is ok.</span>";
                            break;
                        case 'bad':
                            statusHtml = "<span class='statusBad'>Email address is not valid.</span>";
                            break;
                        default:
                            statusHtml = "<span class='statusUnknown'>Unable to validate email. Reason=" + additionalStatus + "</span>";
                            break;
                    }
                }

                console.log(statusHtml);

                // present the result on screen
                $('#validationResult').html(statusHtml);
            }
        </script>
    </body>
</html>

最佳答案

这是您页面的 HTML 输出还是页面本身的代码？

所有脚本都应使用您在functions.php 文件中使用的wp_enqueue_scripts() 函数加载。

您可以使用以下代码:

function myScriptFunction() {
  wp_enqueue_script(
     'custom-script',
     get_stylesheet_directory_uri() . '/js/script.js',
     array( 'jquery', true )
  );
}

add_action( 'wp_enqueue_scripts', 'myScriptFunction' );

这告诉 WordPress 加载您的自定义脚本(它所在的位置)，它依赖于 jQuery，并且应该加载到页脚中。

WordPress 在无冲突模式下加载 jQuery，因此它无法识别“$”，因此请使用 jQuery。

关于javascript - WordPress 无法处理 jQuery 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32236266/

24 4 0
文章推荐： javascript - 单击时模态按钮不执行任何操作
文章推荐： javascript - 如何获取 Bluebird Promise.settle() 的 promise 值？
文章推荐： javascript - jquery 滚动到页面上的同一位置
文章推荐： javascript - 如何使用javascript找到图像的经纬度中间点？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com