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顯示值

回答

相關問題