Question

我正在尝试向我的Wordpress页面添加一些Jquery和CSS代码。我尝试了许多插件，例如“高级自定义字段”，“插入页眉和页脚”，“ Scripts n样式”，“简单自定义CSS和JS”，“简单JS粘贴”等，并按照每个人的方法使用T，但是Jquery脚本拒绝启动。（即使我将其包含在主题的自定义CSS中，CSS也不会出现问题）

我要去哪里错了？有人可以帮我提供一种更好的方法来在页面中包含JQuery吗？

代码：

 
        jQuery(document).ready(function( $ ){
            var StatJSON = {
            "Opt1":  {
                "Name": "Mat",
                "Parameter1": "65",
                "Parameter2": "30"
            },
            "Opt2": {
                "Name": "Mik",
                "Parameter1": "62",
                "Parameter2": "40"
            },
            "Opt3": {
                "Name": "Mir",
                "Parameter1": "65",
                "Parameter2": "90"
            }
        };

        $('#btnSubmit').click(function(){ 
        var resultString = '';
        $('input[type="checkbox"]:checked').each(function() {
        var this_input = $(this);
        if (this_input.is(':checked')){
        resultString += PrintHtml(StatJSON[$(this).val()]);
        }
        });
        $('#divResult').html(resultString);
        });
    });

    function PrintHtml(obj){
        var html='<div class="opt">';
        if (obj){
            $.each(obj, function(k,v){
                html += '<div>'+k+' : '+v+'</div>'; 
            });
        }
        html += '</div>';
        return html;
    }

.opt{
             margin: 10px;
             padding: 10px;
             background: #eee;
             border: 1px solid #222;
         }

    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        </head>
     <style></style>   
    <body>
    Options:
    <input type="checkbox" name="Station" value="Opt1">Option1
    <input type="checkbox" name="Station" value="Opt2">Option2
    <input type="checkbox" name="Station" value="Opt3">Option3
    <input id="btnSubmit" type="submit" value="submit" />
    <br /><br />
    <div id="divResult"></div>
    </body>
    </html>

Answer 1

在活动主题functions.php或插件中添加以下代码，脚本应位于页脚

add_action('wp_footer','add_my_code');

function add_my_code(){

?>
<script>
jQuery(document).ready(function( $ ){
            var StatJSON = {
            "Opt1":  {
                "Name": "Mat",
                "Parameter1": "65",
                "Parameter2": "30"
            },
            "Opt2": {
                "Name": "Mik",
                "Parameter1": "62",
                "Parameter2": "40"
            },
            "Opt3": {
                "Name": "Mir",
                "Parameter1": "65",
                "Parameter2": "90"
            }
        };
        jQuery('input[type="checkbox"]').click(function(e){
            jQuery(this).attr('checked',true);
        });

        jQuery('#btnSubmit').click(function(){ 

        var resultString = '';
        jQuery('input[type="checkbox"]').each(function(a) {
        var this_input = jQuery(this);
        if (this_input.is(':checked')){
        resultString += PrintHtml(StatJSON[jQuery(this).val()]);
        }
        });
        jQuery('#divResult').html(resultString);
        });
    });

    function PrintHtml(obj){
        var html='<div class="opt">';
        if (obj){
            jQuery.each(obj, function(k,v){
                html += '<div>'+k+' : '+v+'</div>'; 
            });
        }
        html += '</div>';
        return html;
    }
</script>
<style>
.opt{
             margin: 10px;
             padding: 10px;
             background: #eee;
             border: 1px solid #222;
         }
</style>
<?php

}

通过插件无法在Wordpress页面中添加JQuery

1 个答案: