Question

当用户点击我页面上的“登录”行时，我正在尝试显示登录表单。当用户单击链接时，目的是使用JQuery从“display：none;”更改div类的CSS样式。 to“display：block;”。

我在W3 Schools代码编辑器中对此进行了测试，看起来效果很好。但是，当我尝试将此应用到我的wordpress网站时，它不起作用。

我在页面的head标签，内容区域，当然还有css文件中修改了代码。以下是每个文件的代码片段：

的style.css

#breadcrumbs-login { position: relative; float: right; color: #fff; padding-top: 9px; }

#breadcrumbs-login a { color: #fff; }

#floating-login { position: absolute; background-color: #999; color: #000; z-index: 10; right: 10px; padding: 5px; border: 1px; }

包括/ breadcrumbps.php

<div id="breadcrumbs-login"> 
        <?php if ( is_user_logged_in() ) {
                           $current_user = wp_get_current_user();
                           echo 'Welcome ' . $current_user->user_firstname;
                   } else { ?>
                           <a href="#" id="floating-login-trigger">Login</a> |
                           <div id="floating-login" class="login_onclick" style="display:none;">
                           <?php echo do_shortcode('[bbp-login]'); ?>
                           </div>
                  <?php } ?>
</div>

当然还有 header.php

中的head标记

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script type="text/javascript">
        $(document).ready(function(){
            $("#floating-login-trigger").click(function(){
                $("login_onclick").css({
                    "display": "block;"
                });
            });
        });
</script>

非常感谢任何帮助。此外，如果有人知道更简单的方法（例如为此类任务设计的插件），我会接受建议，因为我在自己的搜索中没有找到太多建议。

Answer 1

尝试使用此语法，

$("#floating-login-trigger").click(function(e){
       e.preventDefault();

    var loginDiv = $("login_onclick");

    if(loginDiv.css('display') == 'none'){
        loginDiv.css('display', 'block')
    }

});

Answer 2

好的，所以在你的functions.php中你需要找到你的脚本入队的地方。您可能已经有一些脚本可以放入代码。但如果没有，您可以自己添加：

<?php 

define( 'TEMPPATH', get_template_directory_uri() );
define( 'THEME_VERSION', '1.0.0' ); // or whatever your version is

add_action( 'after_setup_theme', 'yourtheme_theme_setup' );

if ( ! function_exists( 'yourtheme_theme_setup' ) ) {
    function yourtheme_theme_setup() {
        //actions go here
        add_action( 'wp_enqueue_scripts', 'yourtheme_frontend_scripts' );
    }
}

if ( ! function_exists( 'yourtheme_frontend_scripts' ) ) {
    function yourtheme_frontend_scripts() {

        wp_enqueue_script( 'yourcode_js', TEMPPATH.'/js/custom_code.js', array( 'jquery' ), THEME_VERSION, true );

    }
}

现在，enqueued your script取决于jQuery。因此，从标题中删除脚本，尤其是jQuery，因为默认情况下它已由WordPress加载，并且您的脚本将明确依赖它。

在新文件中，您输入名为js/的{{1}}文件夹，其中包含您的代码

custom_code.js

这应该这样做。在您的页面上，检查页面时应该可以看到jQuery(document).ready(function($){ 'use strict'; $('#floating-login-trigger').on('click', function(){ $('.login_onclick').css('display', 'block'); }); });。请记住从标题中删除代码和custom_code.js。你不需要那个。

希望这有帮助。

Wordpress页面，单击链接时更改DIV显示值

2 个答案: