Добавление JQuery на страницу Wordpress через плагин не работает - PullRequest
Новая
       1

Добавление JQuery на страницу Wordpress через плагин не работает

0 голосов
/ 05 марта 2019

Я пытаюсь добавить код Jquery и CSS на мою страницу Wordpress.Я перепробовал множество плагинов, таких как Advanced Custom Field, Insert Header and Footer, Scripts n Styles, Simple Custom CSS и JS, Simple JS Paste и т. Д., И следовал методу каждого из них к 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>

1 Ответ

0 голосов
/ 05 марта 2019

Добавьте следующий код в ваши активные темы 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

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...