簡單的jQuery切換在Wordpress

Question

我想創建一個簡單的隱藏/顯示切換jQuery在自定義WordPress模板頁面。

這是我的html，我有自定義頁面模板：

<div id="questionFaq"> 
    <b>This is a question?</b> 
</div> 
<div class="answerFaq"> 
    <p>Lorem ipsum dolor sit amet, consectetur</p> 
</div> 

這是我的一個文件夾中的腳本名爲「JS」：

jQuery("#questionFaq").on("click", function() { 
    var state = $(this).data('state'); 
    state = !state; 
    if (state) { 
     $(".answerFaq").addClass("show"); 
    } else { 
     $(".answerFaq").removeClass("show"); 
    } 
    $(this).data('state', state); 
}); 

我再排隊在功能腳本.php像這樣：

add_action('wp_enqueue_scripts', 'add_my_script'); 
function add_my_script() { 
    wp_enqueue_script(
     'togglescript', 
     get_template_directory_uri() . '/js/togglescript.js', 
     array('jquery') 
    ); 
} 

當我加載頁面的腳本加載在源中，但是當我去實體l頁面，腳本實際上不工作？

Answer 1

 jQuery(document).on("click","#questionFaq", function() { 
      var state = $(this).data('state'); 
      state = !state; 
      if (state) { 
       $(".answerFaq").addClass("show"); 
      } else { 
       $(".answerFaq").removeClass("show"); 
      } 
      $(this).data('state', state); 
     }); 

Answer 2

而不是使用.data屬性，然後切換類屬性的，你可以做到以下幾點：

• 檢查，如果答案是可見
• 然後做一個.show()或.hide()

這是一個簡單的解決方案。

HTML標記

問題和答案應該使用<dl>每W3C的<dt>和<dd>元素一起，爲Q &由於是名 - 值組。

名稱 - 值組可能是術語和定義，元數據主題和值，問題和答案或任何其他名稱 - 值數據組。

我也爲你添加了微數據。

守則

(function($, window, document){ 
 
    "use strict"; 
 

 
    var init = function() { 
 
     $('.faq-question').on("click", faqHandler); 
 
    } 
 

 
    var faqHandler = function() { 
 
     var $answer = $(this).next(); 
 

 
     if ($answer.is(':visible')){ 
 
      $answer.hide(); 
 
     } else { 
 
      $answer.show(); 
 
     } 
 

 
     return false; 
 
    } 
 

 
    $(document).ready(function(){ 
 
     init(); 
 
    }); 
 

 
}(jQuery, window, document));

.faq-question { 
 
    padding: 10px; 
 
    background-color: #ddd; 
 
    margin: 30px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl class="faq-container"> 
 

 
    <dt class="faq-question" itemscope itemtype="http://schema.org/Question">What happens when you click this question?</dt > 
 

 
    <dd class="faq-answer" style="display: none;" itemscope itemtype="http://scheme.org/Answer">the answer appears to delight you.</dd > 
 

 
</dl>

JSFiddle

提高

我建議你有一個圖標還指示方向或CLI行動。它將改善用戶體驗。

其次，最好在腳本enqueue中添加一個版本。爲什麼？ WordPress將版本附加到腳本的URL。當你做出改變時，你會提高版本。這將改變URL，它告訴瀏覽器下載新版本。

否則，如果有人以前在更改前訪問過網站，他們的瀏覽器將使用緩存版本。他們不會看到這些變化，即假設他們沒有清除瀏覽器的緩存。