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

我试图显示登录窗体，当用户在我的页面上点击一行“登录”。当用户单击链接时，意图是使用JQuery将div类的CSS样式从“display：none;”更改为到“显示：块;”。Wordpress页面，点击链接时更改DIV显示值

我已经在W3学校代码编辑器中测试过了，它似乎工作正常。但是，当我尝试将其应用到我的WordPress网站时，它不起作用。

我修改了页面头标记，内容区域，当然还有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>

和当然的头部标记中在头.php

<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>

任何帮助，非常感谢。另外，如果有人知道更简单的方法来做到这一点（例如为此类任务设计的插件），我可以接受建议，因为我在自己的搜索中没有发现太多内容。

来源

2016-06-09 Xthralls

将你的代码放在一个单独的文件中，并使用['wp_enqueue_script']（https://developer.wordpress.org/reference/functions/wp_enqueue_script/）对它进行排队，使其依赖'jQuery'。另外，如果你想拥有AJAX登录表单，请随时查看我在我的网站上制作的教程：[clicky]（http://support.microsoft.com/zh-cn/adding-login-ajax-form-to-your-wordpress/） –

谢谢丹尼斯，但我不完全确定如何做到这一点。我对wordpress还是比较陌生的。你能提供一个例子吗？ – Xthralls

好了，在你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加载，并且脚本将明确依赖它。

在新文件中，放在称为custom_code.js与您的代码js/文件夹中它

jQuery(document).ready(function($){ 
    'use strict'; 

    $('#floating-login-trigger').on('click', function(){ 
     $('.login_onclick').css('display', 'block'); 
    }); 

});

这应该这样做。在您的页面上，您应该在检查页面时看到custom_code.js。请记住从标题中删除代码并jQuery。你不需要那个。

希望这会有所帮助。

来源

2016-06-09 20:21:47

好的，我尝试了你提到的每一步，但不幸的是它仍然没有按预期工作。我从头文件中删除了原始代码，创建了custom_code.js文件并发布了代码，并将代码添加到了functions.php中。 – Xthralls

你有链接到页面，以便我可以看到文件是否入队？ –

当然，这是链接。谢谢参观。 http://www.renewedpulse.com/forum – Xthralls

这个语法尝试，

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

    var loginDiv = $("login_onclick"); 

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

});

来源

2016-06-09 05:55:22 Samir

谢谢Samir，我试图将你的版本复制到标题中，但仍然无法正常工作。任何其他提示？ – Xthralls

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

回答

相关问题