按钮来切换特定类的所有div（纯javascript，还是在jquery之后加载）？

我正在尝试在wordpress页面中插入一个切换按钮，该按钮将更改类“foo”的所有div的状态

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

我的HTML/javascript知识很少，因此请提供所需的完整代码

更多详情： 在我的主题中有jquery，但是如果我尝试使用$（“.CLASSNAME”）.toggle（）语法，我会得到

“未捕获类型错误：未定义不是函数”

我认为这与我的“页面”javascript在jquery加载之前被加载有关

我尝试了很多东西，比如

CSS

HTML

这导致前面提到的“未捕获类型错误：未定义不是函数”

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

关于血淋淋的细节， 这是WordPress4.0.1，第214个主题，在用W4帖子列表创建的页面上

我已经做了三个小时了：/Sigh。

这应该适合你（我对它做了一些修改：）：

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';
        }
    }
}

如果div属于

摘录类

，则会切换

显示

样式：

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

---

可能是由于WordPress在“无冲突”模式下加载

jQuery无冲突包装器

注意：WordPress中包含的jQuery库以“无冲突”模式加载。这是为了防止与WordPress可以加载的其他javascript库的兼容性问题

在“NoConfict”模式下，$快捷方式不可用，并且使用更长的jQuery。例如：

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

变成：

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

解决方案

使用

jQuery

而不是

$

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

---

首先包括jQuery引用，然后在IIFE（立即调用函数表达式）中包括jQuery代码，如下所示：

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

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

这两个脚本标记都应该是关闭标记之前的最后一个标记。通过这种方式加载内容，用户无需等待脚本加载后才能看到内容。如果您需要在加载时隐藏元素（即，您尝试了它，并且当页面加载时元素可见，然后隐藏），那么您应该应用CSS样式，并使用jQuery的

toggleClass（）

方法隐藏/显示或应用

display:none并在要显示项目时使用
toggle（）

.hidden{
    display:none;
}

另一个问题是您的输入类型是submit，它会触发POST（或GET）。这看起来不像您想要做的，所以您应该使用带有
type=button
的按钮标签


在jQuery中绑定单击事件：

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

这里有一把小提琴：
我还没有仔细阅读回复，谢谢大家。在这神秘的一天，我为每个人投了15分。对不起，我的问题没有完全编辑好，我当时已经准备好睡觉了

我最终根据这个JSFIDLE找到了答案：

HTML

显示/隐藏摘录
[…东西…]
[摘录wordlimit=20]

JS

var divs=document.getElementsByTagName（'div'）；
var toggle=function（）{
对于（变量i=0，l=divs.length；i

点击前/后按钮以澄清所需行为的图片
您的页面上似乎没有正确实现jquery。您的head部分是否包含该文件？请尝试使用jQuery而不是$。jQuery（document）.ready（…..而不是$（document）.ready
.extract{display:none}
这是有效的CSS语法。然后要使用jQuery，您需要使用
jQuery
或明确地传递
$
。关于这一点，有很多短文。例如：
函数toggleDiv（）{jQuery（'.extract'）.toggleDiv（）；}）
最后一件事，
submit
input通常会提交一个表单，导致页面重定向或刷新。你的问题很不清楚。仅供参考，jquery的实现是正确的，同样由于这里的wordpress/插件特定的设置，我的js文件在jquery之前加载，所以我不能使用jquery函数——我试图“等到jquery加载之后”，但我从google得到的任何东西都不起作用。我确信提交来自于互联网上的其他答案，我最终实现了一个按钮。是的，我试图记住我累了的东西，但却犯了一些愚蠢的错误。很抱歉，我的示例令人困惑，但我认为我想要的行为在标题中已经清楚地说明了。谢谢大家知道这些很有用！当我有空的时候，我会试试这个——我最终用纯javascript解决了它。有时在他们放的脚本示例（jQuery）的末尾，我也会感到困惑——我再也找不到示例了，很难搜索“（jQuery）”，但是你知道这是用来做什么的吗？非常感谢。谢谢CSS试图让它以隐藏状态开始。但是，是的，我最终把它直接添加到了div中。由于wordpress插件设置的特殊情况，我无法首先将其包括在内。谢谢
function toggleDiv(){
  jQuery('.excerpt').toggle();
}

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

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

.hidden{
    display:none;
}

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

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

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;