简单的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，它告诉浏览器下载新版本。

否则，如果有人以前在更改前访问过网站，他们的浏览器将使用缓存版本。他们不会看到这些变化，即假设他们没有清除浏览器的缓存。