用于切换某些 class 的所有 div 的按钮（纯 javascript，或在 jquery 之后加载）？

Question

我试图在 wordpress 页面中插入一个切换按钮，该按钮将更改 class "foo" 的所有 div 的状态。

有没有一种纯粹的 javascript 方法可以做到这一点，或者有某种方法可以保证 js 在 jquery.js 加载后加载？我真的不想弄清楚 wordpress 如何加载 javascript 并以正确的顺序排队文件或其他什么，这应该是 3 行 javascript 只需要在这一页上.

我的 HTML / javascript 知识很少，所以请包含所需的完整代码。

更多详情：我的主题中有 jquery，但是如果我尝试使用 $(".CLASSNAME").toggle() 语法，我会得到

"Uncaught TypeError: undefined is not a function"

我认为这与我的 "page" javascript 在 jquery 加载之前加载有关。

我尝试了很多东西，比如

CSS

.excerpt{
 style="display: none"
}

HTML

<input type="submit" value="Show/Hide Excerpts" onclick="toggleDiv();"></input>

<div class="excerpt">text i want to toggle</div>

Javascript，在 "script" HTML 标签内

$(document).ready(function toggleDiv() {
$(".excerpt").toggle();
}  )

这导致上述 "Uncaught TypeError: undefined is not a function"

这看起来很有希望，但我不太确定如何调整它以切换/链接到按钮：

关于血淋淋的细节，这是 Wordpress 4.0.1，TwentyFourteen 主题，在使用 W4 Post 列表 plugin.

创建的页面上

我已经在这里待了三个小时了：/叹息。

Answer 1

这应该适合你（我稍微修改了一下：）：

Javascript:

function toggleDiv() {
    var divs = document.getElementsByTagName('div');

    var toggle = function() {    
        for (var i = 0, l = divs.length; i < l; i++) {
            if (divs[i].getAttribute('class') == 'excerpt') 
                if (divs[i].style.display == 'none') divs[i].style.display = '';
                else divs[i].style.display = 'none';
        }
    }
}

HTML:

<input type="submit" value="Show/Hide Excerpts" onclick="toggleDiv();"></input>
...
<div class="excerpt">...</div>

请注意，您根本不需要 CSS 中定义的 class excerpt。所有 Javascript 代码需要的是所有你想要切换的 divs 都标有这个 class:

  if (divs[i].getAttribute('class') == 'excerpt')

如果 div 属于 class excerpt，则切换 display 样式：

  if (divs[i].style.display == 'none') divs[i].style.display = '';
    else divs[i].style.display = 'none';

Answer 2

可能是因为 WordPress 在 "no conflict" 模式下加载。

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

jQuery 无冲突包装器

注意： WordPress 附带的 jQuery 库以 "no conflict" 模式加载。这是为了防止与 WordPress 可以加载的其他 javascript 库的兼容性问题。

在"no-confict"模式下，$快捷方式不可用，使用较长的jQuery。例如：

$(document).ready(function(){
$(#somefunction) ...
});

变为：

jQuery(document).ready(function(){
jQuery(#somefunction) ...
});

解决方案

使用 jQuery 代替 $。

function toggleDiv(){
  jQuery('.excerpt').toggle();
}

Answer 3

首先包含您的 jQuery 参考，然后将您的 jQuery 代码包含在 IIFE（立即调用函数表达式）中，如下所示：

<script src='jquery/location'></script>
<script src='myscript/location'></script>

IIFE 应如下所示：

(function($){
    $('.excerpt').toggle();
})(jQuery)

这两个脚本标签都应该是结束 </body> 标签之前的最后一个标签。这样您的内容就会被加载，并且在 he/she 看到内容之前，用户不必等待您的脚本加载。如果你需要在加载时隐藏元素（即你尝试它并且元素在页面加载时可见然后被隐藏）那么你应该应用 CSS 样式并使用 jQuery 的 toggleClass() 方法添加到 hide/show 或直接将 display:none; 应用于元素并在要显示项目时使用 toggle()。

.hidden{
    display:none;
}

您将遇到的另一个问题是您的输入类型是提交，它触发了 POST（或 GET）。这看起来不像你想做的，所以你应该使用带有 type=button.

的按钮标签

在jQuery中绑定一个点击事件：

$('#toggle').on('click', function(){
    $('.excerpt').toggleClass('hidden');
});

这里是Fiddle：http://jsfiddle.net/24xfa0sL/1/

Answer 4

我还没有仔细阅读回复，谢谢大家。在神话般的一天为所有人投票，我得到 15 分。对不起，我的问题没有得到完美编辑，我当时准备睡觉了。

我最终根据这个 jsfiddle 弄明白了： http://jsfiddle.net/robert/PkHYf/

HTML

<button id="Toggle">Show/Hide Excerpts</button>
[...stuff...]
<div class="excerpt" style="display:none;">
<ul style="margin:0 0 5px 20px;">[excerpt wordlimit=20] </ul></div>

JS

var divs = document.getElementsByTagName('div');

var toggle = function() {    
    for (var i = 0, l = divs.length; i < l; i++) {
        if (divs[i].getAttribute('class') == 'excerpt') 
            if (divs[i].style.display == 'none') divs[i].style.display = '';
            else divs[i].style.display = 'none';
    }
}

document.getElementById('Toggle').onclick = toggle;

点击 before/after 按钮以阐明所需行为的图片

用于切换某些 class 的所有 div 的按钮（纯 javascript，或在 jquery 之后加载）？

Button to toggle all divs of certain class (pure javascript, or loading after jquery)?

javascript

wordpress

jquery